요약
Flexbox를 잘 알고 있다면 Grid가 익숙하게 느껴질 것입니다. 레이첼 앤드류는 시작을 돕기 위해 CSS 그리드를 전문으로 하는 훌륭한 웹사이트를 운영하고 있습니다. 이제 Chrome에서 그리드를 사용할 수 있습니다.
Flexbox는 그리드?
지난 몇 년 동안 CSS Flexbox가 널리 사용되어 왔으며 브라우저 지원은 정말 훌륭할 것으로 보입니다(IE9 이하를 지원해야 하는 열악한 사용자가 아니라면). Flexbox를 사용하면 요소 간 등거리 간격, 위에서 아래로의 레이아웃 또는 CSS 마법사의 성배(수직 중앙 맞춤)와 같은 많은 복잡한 레이아웃 작업을 더 쉽게 수행할 수 있습니다.
하지만 아쉽게도 화면에는 일반적으로 우리가 신경 써야 하는 두 번째 차원이 있습니다. 요소 크기를 직접 처리하지 않으면 안타깝게도 Flexbox만 단독으로 사용하는 것만으로는 세로 및 가로 리듬을 모두 가질 수 없습니다. 이때 CSS 그리드가 필요합니다.
CSS 그리드는 개발 단계에 있고 5년 이상 대부분의 브라우저에서 플래그 뒤처져 왔으며 Flexbox와 같은 버그 실행을 방지하기 위해 상호 운용성에 추가 시간을 투자했습니다. 따라서 Chrome에서 그리드를 사용하여 레이아웃을 구현하면 Firefox와 Safari에서도 동일한 결과를 얻을 수 있습니다. 이 문서 작성 시점을 기준으로, Microsoft Edge의 그리드 구현은 오래되었으며 (IE11에 이미 있는 것과 동일) 업데이트는 '고려 중'입니다.
개념과 구문에서 유사함에도 불구하고 Flexbox와 그리드를 경쟁 레이아웃 기술로 생각하지 마세요. 그리드는 2차원으로 정렬되는 반면 Flexbox는 한 차원으로 배치됩니다. 이 두 가지를 함께 사용하면 시너지 효과가 발생합니다.
그리드 정의
그리드의 개별 속성에 익숙해지려면 레이첼 앤드류의 Grid By Example이나 CSS Tricks의 Cheat Sheet을 강력히 추천합니다. Flexbox를 잘 알고 있다면 많은 속성과 속성의 의미에 익숙할 것입니다.
표준 12열 그리드 레이아웃을 살펴보겠습니다. 기본적인 12열 레이아웃은 숫자 12를 2, 3, 4, 6으로 나눌 수 있어 많은 디자인에 유용합니다. 이 레이아웃을 구현해 보겠습니다.
마크업 코드부터 시작해 보겠습니다.
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
스타일시트에서 먼저 body를 확장하여 전체 표시 영역을 포괄하도록 하고 그리드 컨테이너로 변환합니다.
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
이제 CSS 그리드를 사용합니다. 축하합니다.
다음 단계는 그리드의 행과 열을 구현하는 것입니다. 모형에서 12개의 열을 모두 구현할 수 있지만, 모든 열을 사용하지는 않으므로 이렇게 하면 CSS가 불필요하게 지저분해질 수 있습니다. 편의상 다음과 같이 레이아웃을 구현합니다.
머리글과 바닥글의 너비는 가변적이고 콘텐츠는 두 크기 모두 가변적입니다. 탐색 메뉴도 두 크기 모두에서 가변적이지만 최소 너비를 200px로 지정하겠습니다. (이유가 무엇인가요? CSS 그리드의 기능을 보여주기 위함입니다.)
CSS 그리드에서는 열과 행의 집합을 트랙이라고 합니다. 먼저 첫 번째 트랙 세트인 행을 정의해 보겠습니다.
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows는 개별 행을 정의하는 크기 시퀀스를 사용합니다.
여기서는 첫 번째 행의 높이를 150픽셀로 지정하고 마지막 행에는 100픽셀을 지정합니다.
중간 행은 auto로 설정됩니다. 즉, 해당 행의 그리드 항목 (그리드 컨테이너의 하위 요소)을 수용하기 위해 필요한 높이로 조정됩니다. 본문은 전체 표시 영역에 걸쳐 확장되므로 콘텐���(위 그림에서 노란색)가 포함된 트랙은 최소한 사용 가능한 모든 공간을 채우지만 필요한 경우 확장되고 문서를 스크롤하게 됩니다.
열의 경우 보다 동적인 접근 방식을 취하고자 합니다. 탐색과 콘텐츠가 모두 확장 (및 축소)되기를 원하지만, 탐색을 200픽셀 미만으로 축소하지 않고 콘텐츠를 탐색보다 더 크게 만들고자 합니다. Flexbox에서는 flex-grow와flex-축소를 사용하지만 그리드에서는 약간 다릅니다.
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
2개의 열을 정의합니다. 첫 번째 열은 minmax() 함수를 사용하여 정의됩니다. 이 함수는 트랙의 최솟값과 최댓값, 이렇게 2개의 값을 사용합니다.
하나의 min-width 및 max-width와 같습니다. 최소 너비는 앞에서 설명했듯이
200픽셀입니다. 최대 너비는 3fr입니다. fr는 그리드 요소에 사용 가능한 공간을 배포할 수 있는 그리드별 단위입니다. fr은 '비율 단위'를 의미할 수 있지만 곧 자유 단위를 의미할 수도 있습니다.
여기서 지정한 값은 두 열 모두 화면을 채우도록 확장되지만 콘텐츠 열의 너비는 항상 탐색 열보다 3배입니다 (탐색 열이 200픽셀보다 넓게 유지되는 경우).
그리드 항목의 배치는 아직 올바르지 않지만 행과 열의 크기는 올바르게 작동하고 우리가 원하는 동작을 생성합니다.
항목 배치
그리드의 가장 강력한 기능 중 하나는 DOM 순서와 관계없이 항목을 배치할 수 있다는 것입니다. 하지만 스크린 리더는 DOM을 탐색하므로 제대로 액세스할 수 있도록 요소를 재정렬하는 방법에 유의해야 합니다. 수동으로 배치하지 않으면 요소가 DOM 순서로 그리드에 배치되며 왼쪽에서 오른쪽, 위에서 아래로 정렬됩니다. 각 요소는 하나의 셀을 차지합니다. 그리드가 채워지는 순서는 grid-auto-flow를 사용하여 변경할 수 있습니다.
그렇다면 요소를 어떻게 배치할까요? 그리드 항목을 배치하는 가장 쉬운 방법은 그리드 항목이 포함되는 열과 행을 정의하는 것입니다. 그리드는 이를 위한 두 가지 구문을 제공합니다. 첫 번째 구문에서는 시작점과 끝점을 정의합니다. 두 번째 ��목에서는 시작점과 스팬을 정의합니다.
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
헤더가 첫 번째 열에서 시작하여 세 번째 열 앞에서 끝나도록 하려고 합니다. 탐색은 두 번째 행에서 시작하여 총 2행에 걸쳐 있어야 합니다.
기술적으로는 레이아웃 구현을 완료했지만 배치를 더 쉽게 할 수 있도록 그리드에서 제공하는 몇 가지 편리한 기능을 보여드리겠습니다. 첫 번째 기능은 트랙 테두리의 이름을 지정하고 이 이름을 배치에 사용할 수 있다는 것입니다.
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
위 코드는 이전 코드와 동일한 레이아웃을 생성합니다.
그리드의 전체 영역에 이름을 지정하는 기능은 더욱 강력합니다.
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas는 공백으로 구분된 이름 문자열을 사용하므로 개발자가 각 셀에 이름을 지정할 수 있습니다. 인접한 두 셀의 이름이 같은 경우 동일한 영역으로 병합됩니다. 이렇게 하면 레이아웃 코드에 더 많은 의미 체계를 제공하고 미디어 쿼리를 더 직관적으로 만들 수 있습니다. 다시 이 코드는 이전과 동일한 레이아웃을 생성합니다.
더 있어?
맞습니다. 하나의 블로그 게시물로 다루기에는 너무 많은 내용이 있습니다. GDE인 레이첼 앤드류는 CSS 실무 그룹의 초대 전문가로, 처음부터 Grid가 웹 디자인을 간소화할 수 있도록 협력해 왔습니다. 이 책으로 책을 쓰기도 했습니다. 그리니치의 웹사이트 Grid By Example은 Grid에 익숙해지는 데 도움이 되는 유용한 리소스입니다. 그리드가 웹 디자인에 있어 혁신적인 단계라고 생각하는 사람들이 많으며, 이제 그리드가 Chrome에서 기본적으로 사용 설정되므로 지금 바로 사용할 수 있습니다.