명시적 속성
열(column)의 배치 :
grid-template-columns : 1fr 1fr 1fr;
행(row)의 배치 :
grid-template-rows : repeat(3, 1fr);
- fr은 fraction(분수, 비율)의 약자로 숫자의 비율대로 트랙의 크기가 나눠진다. 1:1:1 비율인 3개의 column을 만든다.
- repeat 함수
repeat(반복횟수, 반복값)을 의미한다. repeat(3, 1fr 4fr 2fr); 이런 식의 패턴도 가능하다.
- minmax 함수
minmax(100px, 1fr); 의 의미는 최소한 100px, 최대는 1fr까지 늘어난다.
- auto-fill, auto-fit
repeat(auto-fill, minmax(20%, auto));
auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.
auto-fill의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어간다.
auto-fill은 셀의 개수가 5개보다 모자라면, 공간이 남고 auto-fit 은 남는 공간 채운다.
[shorthand]
grid : row / column
grid-template-areas
각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치
grid-area
1)
grid-row: 1 / span 2;
grid-column: 1 / span 3;
=
grid-area: 1 / 1 / span2 / sapn3;
2)
.header {grid-area: hd;}
.main {grid-area: ma}
.sidebar {grid-area: sb}
.footer {grid-area: ft}
gap / row-gap / column-gap
그리드 셀 사이의 간격을 설정한다.
gap : 20px 50px;
= row-gap: 10px; column-gap: 20px;
암시적 속성
grid-auto-rows
grid-auto-columns
템플릿에 명시적으로 작성하지 못했지만 넘쳐나는 행, 열에 대해 암시적으로 너비와 높이 지정
grid-auto-flow
흐르는 방향
grid-auto-flow: column; /* or 'row', 'dense', 'column dense' */
⇒ Grid 배치의 기본 설정은 아이템이 row를 기준으로 순서대로 배치가 되다가 들어갈 자리가 없으면 그 칸은 비워두고 아래로 배치됨.
⇒ dense는 빈 셀을 채우는 알고리즘, row와 column에 따라 기준이 다름
Grid 아이템들을 통째로 정렬
아이템 그룹 세로 정렬 : align-content
아이템 그룹 가로 정렬 : justify-content
place-content
⇒ align-content와 justify-content를 같이 쓸 수 있는 단축 속성
⇒ align-content, justify-content의 순서로 작성하고, 하나의 값만 쓰면 두 속성 모두에 적용
container에서 세로, 가로 방향 정렬
align-items
⇒ 아이템들을 세로(column축) 방향으로 정렬
⇒ 기본값은 align-items: stretch; justify-items: stretch; end 로하면 끝으로감
justify-items
⇒ 아이템들을 가로(row축) 방향으로 정렬
⇒ justify-self: end; 하면 특정 아이템만 끝으로 감
place-items
⇒ align-items와 justify-items를 같이 쓸 수 있는 단축 속성
⇒ align-items, justify-items의 순서로 작성하고, 하나의 값만 쓰면 두 속성 모두에 적용
개별 아이템 정렬
align-self
⇒ 해당 아이템을 세로(column축) 방향으로 정렬
⇒ .item { align-self: stretch; /* align-self: start; */ /* align-self: center; */ /* align-self: end; */ }
justify-self
⇒ 해당 아이템을 가로(row축) 방향으로 정렬
⇒ .item { justify-self: stretch; /* justify-self: start; */ /* justify-self: center; */ /* justify-self: end; */ }
place-self
⇒ align-self와 justify-self를 같이 쓸 수 있는 단축 속성
⇒ align-self, justify-self의 순서로 작성하고, 하나의 값만 쓰면 두 속성 모두에 적용
⇒ .item { place-self: start center; }
각 셀의 영역 지정
grid-column : grid-column-start / grid-column-end
grid-row : grid-row-start / grid-row-end
grid-row: 1/3;
⇒ grid-row-start: 1; grid-row-end: 3;
⇒ end를 생략하면 한 칸이다.
⇒ span 2; 현재영역부터 늘어나는 숫자.
