Grid Layout은 테이블과 마찬가지로 열과 행을 기준으로 요소를 정렬할 수 있습니다. 전에 본 flex가 직선의 1차원 배열이라면, grid는 평면의 2차원 배열입니다. 평면 배열이라 하면 HTML 테이블을 떠올리기 쉬운데, 그보다 더 유연하게 작동하고 사용법도 간단합니다.
이 글에서는 grid(이하 그리드)의 기본적인 개념과 사용법을 알아보겠습니다.
기본 예제
먼저 간단한 예제를 보겠습니다. 그리드 레이아웃을 사용해, 너비가 같은 3개의 열을 가진 그리드를 구성하는 코드입니다.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}<div class="container">
<div class="item">박스1</div>
<div class="item">박스2</div>
<div class="item">박스3</div>
<div class="item">박스4</div>
</div>생각보다 간결하지 않나요? 그리드 모양을 정하는 부분은 다음 한 줄입니다.
grid-template-columns: 1fr 1fr 1fr;grid-template-columns로 열의 너비 지정할 수 있습니다. fr은 분할 단위(fractional unit)로 비율이라고 생각하면 편합니다. 위 예제의 1fr 1fr 1fr은 곧 1 : 1 : 1을 의미하는 셈이죠. 물론 fr이 아닌 픽셀값도 사용할 수 있고, css 함수도 사용할 수 있습니다.
위 예제를 다음처럼 css 함수로 표현해도 됩니다. 아래는 1fr을 3번 반복한다는 함수식이니 동일한 결과가 되겠지요.
grid-template-columns: repeat(3, 1fr);이외에도 사용할 수 있는 값이 다양합니다. 더 자세한 내용을 보려면 다음 페이지를 참고하세요.
grid-template-
그리드를 이미 정해진 형태(template)대로 구성하는 속성이 몇가지 있습니다. 앞에서 본 grid-template-columns가 포함됩니다.
grid-template-rows
행을 기준으로 설정하는 grid-template-rows는, 앞에서 본 -columns와 방향만 다르고 나머지 작동 방식은 같다고 보면 됩니다. 구문도 같은 방식으로 사용할 수 있습니다.
grid-template-rows: repeat(3, 1fr);grid-template-areas
평면도 느낌이 드는 grid-template-areas입니다. 앞의 두 속성이 반복적인 구조에 사용하기 좋았다면, 이 속성은 큼직하게 레이아웃을 잡을 때 유용합니다.
.container {
display: grid;
grid-template-areas:
"a a a"
"b c c"
"b c c";
}
.abox { grid-area: a; }
.bbox { grid-area: b; }
.cbox { grid-area: c; }<div class="container">
<div class="abox">박스1</div>
<div class="bbox">박스2</div>
<div class="cbox">박스3</div>
</div>컨테이너에서 영역을 지정하고, 아이템에서 자신이 어느 영역에 들어갈지 지정합니다. 만약 grid-area 값이 a인 아이템이 2개 있다면, 둘 다 a 영역에 들어가니 상단에 겹쳐서 출력될 겁니다.
축약 및 조합
템플릿계 속성들을 grid-template으로 축약하거나 조합할 수 있습니다.
.container {
display: grid;
grid-template:
"a a a" 40px
"b c c" 40px
"b c c" 40px / 1fr 1fr 1fr;
}뭔가 복잡해 보이는데 사실 단순합니다. 그리드의 전체 모양은 a, b, c로 정했고, 각 행의 높이는 40px입니다. 다만, b와 c의 경우, 행 2개 분량을 차지하니 해당 블록의 높이는 80px이 되겠지요. 마지막 1fr 1fr 1fr 은 각 열의 너비 설정입니다. 열마다 동일한 너비를 가지게 되니 a는 b의 3배 너비가 됩니다.
다음 모질라 문서에 들어가면, grid-template의 설정을 바꿔가며 어떻게 영역이 변동되는지 시험해 볼 수 있습니다. 실제로 써 보면 이해하기도 쉬워요.
grid-auto-
앞에서는 행, 열이 몇개인지 직접 정해줬는데, 행/열 개수 지정 없이 컨텐츠에 맞춰 자동으로 그리드가 구성되도록 할 수도 있습니다.
grid-auto-columns / grid-auto-rows
각각 열 / 행을 알아서 자동으로 구성하는 속성입니다.
예를 들어, 다음 코드는 각 열이 1fr로 동일한 너비를 갖되, 몇개의 열을 만들지는 컨텐츠에 따라 자동으로 정해지게 됩니다.
grid-auto-columns: 1fr;grid-template-columns에서 1fr 하나만 쓰면 열이 하나라는 뜻이지만, grid-auto-columns에서 1fr은 그저 열의 너비만 정했을 뿐입니다. 그리드 내 열의 개수는 한 개가 될 수도, 여러개가 될 수도 있습니다.
grid-auto-flow
이건 더 간단합니다. 행도, 열도 특정한 값 없이 방향만 설정합니다. 아이템의 내용에 따라 알아서 그리드 형태가 만들어집니다.
grid-auto-flow: row;그리드 아이템 속성
앞에서 본 컨테이너의 속성은 그리드의 전체 형태를 정하는 설정이었습니다. 이제부터 볼 아이템의 속성으로는 각 아이템의 상세를 정할 수 있습니다. 위치나 순서를 바꾸거나, 테이블에서의 셀 병합처럼 여러 칸을 차지하게 할 수도 있습니다.
grid-row-start / grid-row-end / grid-row
순서대로, 아이템의 시작행 / 종료행 / 앞 두 가지의 축약 설정입니다.
일단 구문을 먼저 보겠습니다.
.abox {
grid-row-start: 2;
grid-row-end: 4;
}해당 아이템(.abox)을 2번째 행에서 시작해, 4번째 행에서 끝나도록 설정했습니다. 단, 종료행 설정은 지정한 행 직전까지를 의미합니다. 즉, 이 예제에서 아이템은 2~3행을 차지하게 됩니다.
이 아이템이 컨테이너의 첫번째 아이템이었더라도, 이 아이템은 2번째 행에 위치하게 됩니다. 또한, 두 행을 차지했으니 (각 셀이 정사각이라는 기준에서) 세로로 길쭉한 영역이 되겠죠.
이걸 축약하면 다음과 같습니다.
.abox {
grid-row: 2 / 4;
}간단하네요.
행의 번호가 아닌 개수로 설정하고 싶다면 span을 함께 쓰면 됩니다. 다음처럼 작성하면 위와 동일한 구문이 됩니다. 첫 줄은 2번째 행에서 시작해 2행 분량, 둘째 줄은 2행 분량을 차지하며 4번째 행에서 종료니까요.
grid-row: 2 / span 2;
grid-row: span 2 / 4;컨테이너 끝(가장자리)까지 확장하고 싶다면 값에 -1을 넣으면 됩니다.
grid-column-start / grid-column-end / grid-column
앞의 grid-row-와 행/열만 바뀌고 나머지는 동일합니다.
참고자료
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout
