요약
Flexbox에 익숙하다면 그리드도 익숙하게 느껴질 것입니다. 레이첼 앤드류는 시작하는 데 도움이 되는 유용한 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 관련 요약본을 꼭 읽어보시기 바랍니다. 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는 개별 행을 정의하는 크기 시퀀스를 사용합니다.
여기서는 첫 번째 행의 높이를 150px로, 마지막 행의 높이를 100px로 지정했습니다.
가운데 행은 auto로 설정되어 있습니다. 즉, 해당 행의 그리드 항목 (그리드 컨테이너의 하위 요소)을 수용하기 위해 필요한 높이로 조정됩니다. 본문이 전체 표시 영역에 걸쳐 늘어나기 때문에 콘텐츠가 포함된 트랙(위 그림에서 노란색)은 적어도 모든 사용 가능한 공간을 채우지만 필요한 경우 증가하여 문서가 스크롤되도록 합니다.
열의 경우 좀 더 동적인 접근 방식을 취합니다. 즉, 탐색과 콘텐츠가 모두 증가 (및 축소)되기를 원하지만 탐색이 200px 미만으로 축소되지 않도록 하고 콘텐츠가 탐색보다 더 커지기를 원합니다. Flexbox에서는 flex-grow 및flex-shrink를 사용하지만 그리드에서는 약간 다릅니다.
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
2개의 열을 정의합니다. 첫 번째 열은 minmax() 함수를 사용하여 정의되며, 이 함수는 트랙의 최소 크기와 최대 크기, 이렇게 두 개의 값을 사용합니다.
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 By Example 웹사이트는 그리드를 익히는 데 유용한 리소스입니다. 많은 사람들이 그리드가 웹 디자인의 혁신적인 단계라고 생각하며, 이제 Chrome에서 기본으로 사용 설정되어 바로 사용할 수 있습니다.