그리드 레이아웃 명시적, 암시적 - by. UXKM

요약 설명

CSS Grid는 웹 페이지 컨텐츠를 행과 열로 나눌 수 있는 2차원 레이아웃 시스템입니다.
display: grid 또는 display: inline-grid로 설정한 요소가 그리드 컨테이너가 되며, 그 안에 포함된 자식 요소들이 그리드 아이템이 됩니다.

flex는 1차원 레이아웃(행 또는 열)을 다루지만, grid는 2차원 레이아웃(행과 열)을 다룹니다.
복잡한 레이아웃을 구현하는 데 유용하며, 브라우저 대부분이 완벽하게 지원하고 있습니다.

명시적 그리드(Explicit Grids)와 암시적 그리드(Implicit Grids)의 차이점

명시적 그리드(Explicit Grids)

grid-template-rows, grid-template-columns, grid-template-areas로 정의된 그리드를 명시적 그리드라고 합니다.
속성을 사용하여 격자를 형성하는 선 트랙의 고정된 수를 정의할 수 있습니다.

4개의 수직 트랙(열)과 2개의 수평 트랙(행)이 있는 명시적 그리드

반복 표기법으로 생성된 100px 너비의 세로 트랙 4개가 포함된 명시적 그리드

그리드 컨테이너에 맞게 너비가 100px인 수직 트랙을 반복

auto-fit 키워드를 사용한 반복 표기법은 그리드 컨테이너에 필요한만큼 많은 트랙을 만듭니다

세로 트랙보다 많은 항목이 있으면 더 많은 행이 추가

두 축에서 auto-fill 키워드를 사용한 반복 표기법

암시적 그리드(Implicit Grids)

그리드에 셀보다 많은 그리드 항목이 있거나 그리드 항목이 명시적 그리드 외부에 배치될 때 그리드 컨테이너는 그리드 선을 추가하여 그리드 트랙을 자동으로 생성합니다.
이러한 추가 암시적 트랙 및 선과 함께 명시적 그리드는 암시적 그리드를 형성합니다.
암시적 트랙은 명시적 그리드의 끝에 추가될 수 없으며, 명시적 그리드를 시작으로 확장해야 합니다.

암시적 선 및 트랙을 생성하는 명시적 그리드 외부에 배치 된 두 개의 항목

암시적 트랙의 고정 너비 및 높이

한 행과 한 열씩 시작으로 확장된 암시적 그리드

항목 수가 셀 수를 초과하면 행 대신 새 열이 추가

명시적인 선과 트랙이 없는 암시적 그리드