Grid
2차원 레이아웃 구조를 만들 때 사용
- Flex처럼 한 방향으로 그리는 것이 아닌, 지그재그 방향으로 그린다.
Cell
Grid Container에서 나눠진 영역을 cell 이라고 한다.
-
cell 안에 item이 존재하고, cell당 하나의 item을 가진다.
-
-items가 붙은 속성은 모두 cell 영역에 빈 공간이 있는 경우에만 사용이 가능하다.
Grid Container
display
grid
- flex와 마찬가지로 grid container가 block 요소의 성질을 가진다.
inline-grid
- flex와 마찬가지로 grid container가 inline 요소의 성질을 가진다.
grid-template-rows
cell의 행 개수 및 높이를 명시적으로 정의하며, 기본값은 auto다.
-
속성명은 row이지만, 실제로는 cell의 높이를 설정하는 것에 주의하자.
-
repeat() 함수의 사용이 가능하다.
grid-template-columns
cell의 열 개수 및 너비를 명시적으로 정의하며, 기본값은 auto다.
-
속성명은 column 이지만, 실제로는 cell의 너비를 설정하는 것에 주의하자.
-
repeat() 함수의 사용이 가능하다.
grid-auto-rows
명시적으로 정의되지 않은 cell의 높이를 설정한다.
grid-auto-columns
명시적으로 정의되지 않은 cell의 너비를 설정한다.
grid-auto-flow
grid-item의 흐름을 정의한다. 기본값은 row다.
row
- 행 방향으로 item이 순서대로 쌓이도록 한다.
column
- 열 방향으로 item이 순서대로 쌓이도록 한다.
dense
-
빈 공간으로 item이 채워지도록 한다.
-
기본적으로 row dense이며, dense만 쓰면 row가 생략된다.
-
열 방향으로 빈 공간에 item을 자동으로 채우는 column dense도 사용이 가능하다.
justify-content
Flex의 속성과 동일하지만, Grid에서는 row 축을 기준으로 정렬한다. 기본값은 normal이다.
normal
- flex의 stretch와 동일하며, grid-template-columns가 정의되어 있는 경우 normal은 무시된다.
start, center, end, space-between, space-around
- flex와 동일한 동작을 한다.
space-evenly
- row축 내에서 사용하는 여백을 모두 동일한 너비로 분배해서 정렬한다.
align-content
Flex의 속성과 동일하지만, Grid에서는 column 축을 기준으로 정렬한다. 기본값은 normal이다.
- 사용하는 값은 justify-content와 동일하다.
justify-items
cell 내에서 item의 row축 정렬을 정의한다. 기본값은 normal이다.
- justify-content와 같은 동작을 하며, item이 하나밖에 없으므로 space가 붙은 값들은 사용할 수 없다.
align-items
cell 내에서 item의 column축 정렬을 정의한다. 기본값은 normal이다.
- align-content와 같은 동작을 하며, 마찬가지로 space가 붙은 값들은 사용할 수 없다.
grid-tempate-areas
grid-area에 정의된 이름을 이용해서 item을 배치하는 속성
-
값은
String으로 되어있으며, template-rows와 template-columns에 영향을 받는다. -
만약 4행 3열 레이아웃인 경우는 아래처럼 사용할 수 있다.
grid-template-areas:
"header header header"
"main main aside"
"main main aside"
"footer footer footer"-
String한 줄이 row에 해당하며,String내부에 있는 값 하나가 column에 해당한다. -
해당 영역을 비우고 싶은 경우
.(마침표)혹은none을 채우면 된다.
grid-gap
grid-row-gap과 grid-column-gap의 축약형이다.
grid-row-gap
grid-item의 row line에 여백을 만든다.
grid-column-gap
grid-item의 column line에 여백을 만든다.
Line
container에서 나눠진 cell과 cell 사이를 Line이라고 한다. 음수와 양수 Line이 존재한다.
-
row line은 row 축을 기준으로 위쪽이 1부터 시작하여 아래로 갈수록 커진다.
-
column line은 column 축을 기준으로 왼쪽이 1부터 시작하여 오른쪽으로 갈수록 커진다.
-
음수 Line은 row의 경우 가장 아래쪽이 -1부터 시작하며, column은 가장 오른쪽에서 -1부터 시작한다.
Grid Items
grid-area
item에 grid-template-areas 에서 사용할 이름을 부여한다.
String이지만, 값에"는 붙이지 않는다.
grid-row-start
item이 row 축을 기준으로 몇 번 Line에서 시작할지 정하는 속성
- 값으로 상수를 사용하면 item의 시작 line을 나타내며, span과 상수를 같이 사용하면 (현재 line + 상수) line 까지 item이 늘어난다.
grid-row-end
item이 row 축을 기준으로 몇 번 Line에서 끝날지 정하는 속성
grid-row
grid-row-start와 grid-row-end의 축약형이다.
- row-start:1, row-end:3 이라면
row: 1 / 3으로 표현한다.
grid-column-start
item이 column 축을 기준으로 몇 번 Line에서 시작할지 정하는 속성
- grid-row-start와 동일하다.
grid-column-end
item이 column 축을 기준으로 몇 번 Line에서 끝날지 정하는 속성
grid-column
grid-column-start와 grid-column-end의 축약형이다.
- 값은 grid-row와 동일하다.
justify-self
item에 개별적으로 row축 정렬을 정의할 때 사용한다.
- justify-items와 같은 값을 사용한다.
align-self
item에 개별적으로 column축 정렬을 정의할 때 사용한다.
- align-items와 같은 값을 사용한다.
order
flex와 동일하게 값이 클수록 item이 뒤쪽에 배치된다. 기본값은 0이다.
word-break
텍스트가 콘텐츠 박스 밖으로 넘칠 때 줄 바꿈을 정의하는 속성. 기본값은 normal이다.
keep-all
- 한중일(CJK) 텍스트에서 글자 단위로 줄바꿈을 하지 않도록 설정한다.
Grid Function
repeat
반복적인 값이 필요할 때 사용하는 함수
-
repeat(length, value)형태로 사용한다. -
100px 200px 100px 200px 처럼 패턴이 있다면,
repeat(2, 100px 200px)로 표현이 가능하다.
minmax
최소값, 최대값을 정의하는 함수
minmax(min, max)형태로 사용한다.
fit-content
최대한 content에 맞추도록 크기를 지정하는 함수
fit-content(maxValue)형태로 사용한다.
Grid Units
fraction
사용 가능한 공간 너비 비율을 정의하는 단위
-
fr로 사용한다. -
사용 가능한 공간 너비 비율을 정의하기 때문에, 공간이 없는 경우 제대로 동작하지 않는다.
min-content
content가 가진 너비를 최소 너비로 가지도록 한다.
max-content
content가 가진 너비를 최대 너비로 가지도록 한다.
auto-fit
repeat 함수의 length 부분에 사용하는 값. container의 크기에 맞춰서 cell을 자동으로 나눈다.
- auto-fit은 1개의 행에서 공간이 남았을 때, 지정할 수 있는 최대 너비를 우선해서 적용한다.
auto-fill
repeat 함수의 length 부분에 사용하는 값. container의 크기에 맞춰서 cell을 자동으로 나눈다.
- auto-fill은 1개의 행에서 공간이 남았을 때, 지정할 수 있는 최소 너비를 우선해서 적용한다.
