행과 열을 동시에 사용하는 2차원 레이아웃을 만듭니다.
Grid 컨테이너는 열과 행의 track을 정의하고 item을 칸에 배치합니다. 카드 목록, 대시보드, 페이지 큰 영역처럼 두 축 정렬이 중요한 경우에 적합합니다.
repeat(2, 1fr)가 .stage를 같은 폭의 열 두 개로 나누고, 행은 따로 정하지 않았으므로 항목이 들어올 때마다 필요한 만큼 자동으로 만들어집니다. 그래서 A와 B가 첫 행, C와 D가 둘째 행을 채우며, gap 12px가 열 사이와 행 사이를 같은 간격으로 띄웁니다.
grid-template-columns로 정한 격자를 명시적 격자라 하고, 그 범위를 넘어 자동으로 생긴 행은 암시적 격자에 속합니다. 암시적 행의 높이는 grid-auto-rows로 정하며, 기본값 auto는 그 행에서 가장 큰 항목에 높이를 맞춥니다.
단순한 한 줄 버튼 정렬까지 모두 Grid로 만들 필요는 없습니다.
직접 바꿔보세요열을 3개로 바꾸고 item 배치를 확인하세요.