[css] Grid 한 눈에 정리하기

younoah·2021년 9월 6일

CSS grid

[css]

목록 보기

16/17

🏃🏻‍♂️ intro

grind는 행과 열 두 방향(2차원) 레이아웃 시스템이다.

📦 컨테이너 속성

display

display : 그리드 컨테이너를 정의
- grid : Block 특성의 그리드 컨테이너 정의
- inline-grid : Inline 특성의 그리드 컨테이너 정의

grid-template(명시적 트랙)

grid-template-rows : 명시적 행(track)의 크기를 정의
- 1행 크기, 2행 크기, ... 단위 : px, %, fr
grid-template-columns : 명시적 열(track)의 크기를 정의
- 1열 크기, 2열 크기, ... 단위 : px, %, fr

grid-template-area : 영역의 이름을 참조해 템플릿 생성

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: /* 그리드 컨테이너에서 area 정의*/
    "header header header"
    "main main aside"
    "footer footer footer";
}
/* 그리드 아이템에서 어떤 area에 속하는지 정의*/
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

grid-template : grid-template-rows, grid-template-columns , grid-template-areas의 단축 속성

grid-template: <grid-template-rows> / <grid-template-columns>;
grid-template: <grid-template-areas>;
grid-template:
    [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
    [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
    / <grid-template-columns>;

grid : grid-template-xxx 와 grid-auto-xxx 의 단축 속성

grid: <grid-template>;
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

grid-auto(암시적 트랙)

grid-auto-rows : 암시적 행(track)의 크기를 정의
- 명시적트랙 정의(grid-template-rows)와 동일하게 사용한다.
grid-auto-columns : 암시적 열(track)의 크기를 정의
- 명시적트랙 정의(grid-template-columns)와 동일하게 사용한다.
grid-auto-flow : 자동 배치 알고리즘 방식을 정의
- row : 각 행 축을 따라 차례로 배치 (기본값)
- column : 각 열 축을 따라 차례로 배치
- row-dense : 각 행 축을 따라 차례로 배치, 빈 영역을 메움
- column-dense : 각 열 축을 따라 차례로 배치, 빈 영역을 메움

grid : grid-template-xxx 와 grid-auto-xxx 의 단축 속성

grid: <grid-template>;
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;

gap

row-gap(grid-row-gap) : 행과 행 사이의 간격을 정의
column-gap(grid-column-gap) : 열과 열 사이의 간격을 정의
gap(grid-gap) : xxxx-gap 의 단축 속성

정렬

content

justify-content : 그리드 컨텐츠를 수평(행 축) 정렬
- normal : stretch 와 같다. (기본값)
- start : 시작점(왼쪽) 정렬
- end : 끝점(오른쪽쪽) 정렬
- center : 수평 가운데 정렬
- space-around : 각 행 좌우에 여백을 고르게 정렬
- space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지는 여백이 고르게 정렬
- space-evenly : 모든 여백을 고르게 정렬
- stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림
align-content : 그리드 컨텐츠를 수직(열 축) 정렬
- normal : stretch 와 같다. (기본값)
- start : 시작점(위쪽) 정렬
- end : 끝점(아래쪽) 정렬
- center : 수직 가운데 정렬
- space-around : 각 행 위아래 여백을 고르게 정렬
- space-between : 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지는 여백이 고르게 정렬
- space-evenly : 모든 여백을 고르게 정렬
- stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림

place-contetn : align-content 와 justify-content 의 단축 속성

.container {
  place-content: <align-content> <justify-content>;
}

items

아이템의 가로, 세로의 크기가 셀(트랙)보다 작을 때, 셀 안에서 아이템의 정렬을 정의

셀 안에서는 아이템은 1개이므로 space-xxx 계열 값은 존재하지 않는다.

align-items : 그리드 아이템들을 수직(열 축) 정렬
- normal : stretch 와 같다. (기본값)
- start : 시작점(위쪽) 정렬
- end : 끝점(아래쪽) 정렬
- center : 수직 가운데 정렬
- stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림
justify-items : 그리드 아이템들을 수평(행 축) 정렬
- normal : stretch 와 같다. (기본값)
- start : 시작점(왼쪽) 정렬
- end : 끝점(오른쪽쪽) 정렬
- center : 수평 가운데 정렬
- stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림
place-items : align-items 와 justify-items 의 단축 속성

🧸 아이템 속성

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}

.item:nth-child(1) {
  /* Row 1번에서 3번까지 */
  grid-row-start: 1;
  grid-row-end: span 2;
}

grid-row

grid-row-start : 그리드 아이템의 행 시작 위치 지정
grid-row-end : 그리드 아이템의 행 끝 위치 지정
grid-row : grid-row-start 와 grid-row-end 의 단축 속성

grid-column

grid-column-start : 그리드 아이템의 열 시작 위치 지정
grid-column-end : 그리드 아이템의 열 끝 위치 지정
grid-column : grid-column-start 와 grid-column-end 의 단축 속성

area

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: /* 그리드 컨테이너에서 area 정의*/
    "header header header"
    "main main aside"
    "footer footer footer";
}
/* 그리드 아이템에서 어떤 area에 속하는지 정의*/
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

grid-area : 영역 이름을 설정하거나, grid-row 와 grid-column 의 단축 속성

단일 그리드 아이템 정렬

justify-self : 단일 그리드 아이템을 수평(행 축) 정렬
- normal : stretch 와 같다. (기본값)
- start : 시작점(왼쪽) 정렬
- end : 끝점(오른쪽쪽) 정렬
- center : 수평 가운데 정렬
- stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림
align-self : 단일 그리드 아이템을 수직(열 축) 정렬
- normal : stretch 와 같다. (기본값)
- start : 시작점(위쪽) 정렬
- end : 끝점(아래쪽) 정렬
- center : 수직 가운데 정렬
- stretch : 열 축을 채우기 위해 그리드 컨텐츠를 늘림
place-self : align-self 와 justify-self 의 단축 속성

배치 순서와 위치

order : 그리드 아이템의 배치 순서를 지정
z-index : 그리드 아이템의 쌓이는 순서를 지정

명시적 트랙(셀)과 암시적 트랙(셀)

grid-template-row 와 grid-template-column 속성으로 정의한 명시적 트랙(셀)의 외부에 배치되는 트랙을 암시적 트랙(셀)이라한다.

📚 참고사이트

younoah

console.log(noah(🍕 , 🍺)); // true

이전 포스트

[css] flex 한 눈에 정리하기

다음 포스트