CSS Grid는 행과 열을 함께 제어하는 2차원 레이아웃 시스템이다. 페이지의 본문과 사이드바를 나누거나 여러 카드의 열을 맞추는 등, 두 방향의 관계가 중요한 화면에 사용한다. 개별 요소 정렬에는 Flexbox를 함께 사용할 수 있다.
컨테이너와 트랙
부모에 display: grid를 지정하면 자식 요소가 그리드 아이템으로 배치된다. 행이나 열 사이의 공간 단위를 트랙이라고 부르고, 그 경계가 그리드 선이다. grid-template-columns로 열 구성을 정할 수 있으며 fr 단위는 남는 공간을 비율로 나누는 데 사용한다. 예를 들어 2fr 1fr은 가용 공간을 두 부분과 한 부분의 비율로 배분하도록 표현한다.
명시적 배치와 자동 배치
정의한 행·열을 명시적 그리드라고 하고, 콘텐츠가 더 들어와 필요에 따라 만들어지는 트랙은 암시적 그리드에 해당한다. 아이템을 선 번호나 이름으로 배치할 수도 있고 자동 배치에 맡길 수도 있다. 문서 수가 변하는 목록에서는 항목 개수를 고정하지 않고 추가 콘텐츠가 자연스럽게 다음 행으로 흐르도록 설계하는 편이 유지보수에 유리하다.
카드 목록 예
분류별 문서 카드를 표시한다면 다음과 같이 최소 크기와 가용 공간을 함께 고려할 수 있다.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
이 값은 예시다. 부모가 최소 카드 너비보다 좁으면 넘칠 수 있으므로 실제 화면에 맞는 대응이 필요하다. 반응형 웹 디자인에서는 한 가지 코드 조각보다 전체 컨테이너의 크기 조건을 함께 봐야 한다.
시각적 배치의 한계
Grid로 요소 위치를 자유롭게 바꿀 수 있어도 읽기 순서와 키보드 탐색까지 무조건 같은 순서로 바뀌지는 않는다. 콘텐츠의 논리 순서는 HTML에서 먼저 정한다. 표 형태의 데이터를 정렬된 카드로 보여줄 수는 있지만, 행·열 헤더 관계를 전달해야 하는 실제 표는 의미에 맞는 테이블 구조가 필요하다. Grid는 배치 도구이며 데이터의 의미 구조를 대신하지 않는다. 관련 공식 설명.
참고: 공식 개발 문서.