1. 개요
CSS 레이아웃의 핵심 요소 display의 속성값 중 하나인 grid에 대해 다룬다.
부모 요소에 적용하여 자식 요소를 2차원(행과 열)으로 배치할 수 있게 지원하는 속성이다.
그리드는 수평선, 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다.
이 디자인은 문서에서 문서로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 일관성을 높인다.
문서가 중구난방하지 않고 깔끔하게 보이도록 뼈대 역할을 해준다.
2. grid 레이아웃 구조
하나의 그리드는 columns(열), rows(행)로 구성되며, 각 행과 열의 공백은 gutters라 부른다.
3. grid 자식 요소 배치 방법
먼저 부모 요소에 다음과 같이 열을 추가해 그리드의 시각적 효과를 볼 수 있다.
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}위와 같이 설정하면 자식 요소가 200px의 열 3개로 배치된 것을 볼 수 있다.
3.1. 가변 그리드 설정
fr 단위로 가변 그리드 설정이 가능하다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}fr 단위는 그리드 컨테이너에서 그리드의 행과 열 크기를 유연하게 조정할 수 있는 백분율이다.
공간을 비례적으로 나눠 분배하는 단위이다.
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}위와 같이 설정하면 첫 번째 열이 사용 가능한 공간을 다른 열보다 두 배를 차지한다.
3.2. item별 간격 설정
grid-gap으로 item별 간격을 설정할 수 있다.
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
grid-gap: 20px;
}위와 같이 설정하면 각 item은 20px만큼의 간격을 가지게 된다.
gird-gap은 fr 단위 설정이 불가능하다.
3.3. repeat() 함수로 목록 반복
repeat() 함수를 사용해 item 목록의 일부 또는 전체를 반복 설정할 수 있다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}위와 같이 설정하면 3개의 1fr 설정과 동일한 효과를 얻는다.
첫 번째 인자에 반복할 횟수, 두 번째 인자에 값을 지정할 수 있다.
3.4. 암시적 그리드
위 css를 보면 행은 지정하지 않고 열만 지정하고 있는데, 그리드 레이아웃은 행이나 열 중 하나를 따로 지정하지 않아도 알아서 만들어진다.
이를 암시적 그리드라고 하며, 크기를 지정할 수도 있다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-gap: 20px;
}3.5. minmax() 함수로 최소·최대 크기 설정
minmax() 함수를 이용해 item의 최소·최대 크기를 설정할 수 있다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}첫 번째 인자에 최소 크기, 두 번째 인자에 최대 크기를 지정한다.
최대 크기에 auto를 넣으면 더 많은 컨텐츠를 수용하기 위해 자동 확장된다.
3.6. 자동 열 생성
컨테이너에 들어갈 수 있을 만큼 자동으로 열을 생성하도록 응용할 수 있다.
repeat() 함수를 사용해 grid-template-columns값을 설정하되 숫자 대신 auto-fit을 전달한다.
두 번째 인자에 최솟값은 원하는 item 크기를, 최댓값은 1fr인 minmax()를 아래와 같이 지정했다.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);
gap: 20px;
}그리드가 컨테이너에 들어갈 수 있을 만큼 200px 열을 생성한 다음 모든 열에 남은 공간을 공유시킨다.
3.7. 라인 기반 배치
라인을 기반으로 item을 배치할 수 있다.
그리드에는 항상 라인이 있으며, 값은 1부터 시작한다.
시작과 끝 라인을 지정하여 이 라인에 따라 사물을 정렬한다. 속성은 다음과 같다.
grid-column-start
grid-column-end
grid-row-start
grid-row-end
이 속성들은 모두 라인 번호를 값으로 사용할 수 있다.
라인 기반 배치의 약칭 속성은 다음과 같다.
grid-column
grid-row
이 속성들로 시작 줄과 끝 줄을 슬래시(/)로 구분하여 한 번에 지정할 수 있다.
header {
grid-column: 1 / 3; /* 열 기준 1부터 3까지 점유 */
grid-row: 1;
}
article {
grid-column: 2;
grid-row: 2;
}
aside {
grid-column: 1;
grid-row: 2;
}
footer {
grid-column: 1 / 3;
grid-row: 3;
}결과는 아래와 같이 배치된다.
위의 사진은 grid-template-areas, 그리드 프레임워크의 결과와 동일하다.
3.8. grid-template-areas로 위치 잡기
grid-template-areas를 이용해 아래와 같이 위치를 지정할 수 있다.
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 1fr 3fr;
gap: 20px;
}
header {
grid-area: header;
}
article {
grid-area: content;
}
aside {
grid-area: sidebar;
}
footer {
grid-area: footer;
}결과는 라인 기반 배치의 사진과 동일하다.
grid-template-areas의 몇 가지 규칙
그리드로 이루어진 전체 셀을 채우도록 해야 한다.
두 개의 셀을 합치려면 해당 이름을 반복해야 한다.
셀을 비우려면 마침표(.)를 사용한다.
영역은 반드시 직사각형이어야 한다.
영역은 다른 위치에서 반복될 수 없다.
3.9. 그리드 프레임워크
그리드 프레임워크는 12열 또는 16열 그리드를 기반으로 하는 경우가 많다.
그리드에는 이런 사양이 기본적으로 제공된다.
라인 기반 배치를 사용해 12열 그리드에 컨텐츠를 배치할 수 있다.
header {
grid-column: 1 / 13;
grid-row: 1;
}
article {
grid-column: 4 / 13;
grid-row: 2;
}
aside {
grid-column: 1 / 4;
grid-row: 2;
}
footer {
grid-column: 1 / 13;
grid-row: 3;
}결과는 라인 기반 배치의 사진과 동일하다.