Grid
바둑판 같은 2차원 배치, CSS Grid
Flexbox가 한 줄(1차원) 정렬에 특화되어 있다면, Grid는 행(Row)과 열(Column)을 동시에 제어하는 강력한 2차원 레이아웃 시스템입니다. 부모 요소에 Grid 속성을 부여하여 뼈대를 만들 수 있습니다.
심화 학습
CSS Grid 심화 (칸 병합과 자유로운 배치)
엑셀에서 "셀 병합"을 하듯이 복잡한 대시보드나 사진 갤러리를 만들 때 마법처럼 작동합니다.
Grid의 보이지 않는 선(Line) 넘버링
선 1
선 2
선 3
선 4
줄 1
줄 2
줄 3
1칸
1칸
1칸
1칸
1칸
1칸
칸이 3개라면 기준이 되는 세로선(Line)은 4개가 생깁니다.
grid-column: 1 / 4;는 1번 세로선부터 4번 세로선까지 가로로 쭉 병합하라는 뜻입니다!
마찬가지로 grid-row: 2 / 4;는 2번 가로줄부터 4번 가로줄까지 세로로 쭉 병합하라는 뜻입니다.
선 번호 대신 '칸 수'로 병합하기 (span)
복잡한 선 번호를 계산하기 번거롭다면 span 키워드를 사용할 수 있습니다.
예를 들어 grid-column: span 2;를 적용하면 시작 선 번호와 상관없이 현재 위치에서부터 가로로 2칸을 병합하게 되어 훨씬 편리합니다.
grid-template-areas (이름으로 구역 나누기)
각 구역에 이름표(grid-area)를 달아주면, 마치 퍼즐을 맞추듯 작성한 문자열 모양 그대로 레이아웃이 완성됩니다.
CSS
grid-template-areas:"header header header"
"sidebar content nav"
"footer footer footer";
➡
header
sidebar
content
nav
footer
💡 눈으로 보는 CSS 코드의 단어 배치가 곧 실제 브라우저 상의 레이아웃이 됩니다!