그리드 트랙
하나의 클래스로 동일한 크기의 Grid 트랙이나 트랙에 걸치는 배치를 지정합니다.
이 페이지의 내용
클래스
| 클래스 | 선언 |
|---|---|
grid-cols(<integer>) | display: grid;grid-template-columns: repeat(<integer>, minmax(0, 1fr)); |
grid-rows(<integer>) | display: grid;grid-auto-flow: column;grid-template-rows: repeat(<integer>, minmax(0, 1fr)); |
grid-col-span(<integer>) | grid-column: span <integer>/span <integer>; |
grid-row-span(<integer>) | grid-row: span <integer>/span <integer>; |
grid-cols()와 grid-rows()는 Grid를 만들고, span 함수는 기존 Grid 안에 항목을 배치합니다.
트랙 수와 항목 배치는 서로 다른 요소가 지정합니다
grid-cols(3)는 display: grid와 minmax(0, 1fr) 열 세 개를 설정합니다. grid-rows(3)는 같은 형태의 행 세 개와 grid-auto-flow: column을 설정합니다. 나머지 배치가 기본값이면 동일한 자식 여섯 개가 첫 번째에서는 가로로, 두 번째에서는 아래로 채워집니다.
열과 행의 조합 스타일은 같은 자식을 다른 방향으로 채웁니다
두 Grid는 같은 자식 여섯 개와 gap을 사용합니다. grid-rows(3)는 grid-auto-flow: column도 설정하며 grid-cols(3)는 기본 행 방향 흐름을 유지합니다. 타일 높이는 콘텐츠에 따라 정해집니다.
텍스트 설명
- 첫 번째 Grid는 명시적인 minmax(0, 1fr) 열 세 개를 갖습니다. 기본 행 방향 흐름이 첫 행에 항목 1, 2, 3을 가로로 배치하고 이어서 4, 5, 6을 배치합니다.
- 두 번째 Grid는 명시적인 minmax(0, 1fr) 행 세 개와 열 방향 자동 배치를 사용합니다. 항목 1, 2, 3이 첫 열을 채우고 4, 5, 6이 두 번째 열을 채웁니다.
- 두 장면은 실제 프리셋 CSS, 콘텐츠에 맞춰 크기가 정해지는 동일한 타일 여섯 개, 12px gap을 사용합니다. 타일 너비를 비교할 수 있도록 전체 너비를 맞췄으며 두 조합 스타일 자체는 이 gap이나 너비를 제공하지 않습니다.
- 그림은 기본 항목 배치를 사용합니다. 명시적 배치와 span이 결과를 바꿀 수 있으며 grid-cols는 다른 곳에서 설정한 열 방향 흐름을 초기화하지 않습니다.
트랙 수와 span에는 양의 정수를 사용하세요. 트랙 함수는 gap을 추가하지 않습니다. 동일한 비율은 gap을 제외한 가용 공간을 나눕니다. 최솟값이 0이면 트랙을 줄일 수 있지만, 이 설정 자체가 내용을 줄바꿈하거나 잘라 내지는 않습니다.
grid-col-span(2)와 grid-row-span(2)는 항목의 배치를 지정하며 부모 요소의 display는 설정하지 않습니다. span이 명시적 Grid를 넘으면 암시적 트랙이 생길 수 있습니다. 중단점별로 트랙 수와 span을 조정하는 방법은 레이아웃 가이드에서 다룹니다.
grid-cols()는 grid-rows()가 설정한 열 방향 흐름을 초기화하지 않습니다. 둘 다 적용되면 두 트랙 정의가 모두 유지되고 자동 배치는 계속 열을 따라 아래로 진행합니다. 행 방향 흐름이 필요하면 (grid-auto-flow:row)를 명시적으로 추가하세요.
행의 비율로 고정된 세로 공간을 나누려면 가용 높이에 제약이 있어야 합니다. 높이가 auto인 Grid에서는 콘텐츠도 행 크기 계산에 참여합니다. grid-rows(3)는 높이를 제한하지 않습니다.
관련 문서: 레이아웃, 네이티브 Grid 배치.
사용 예
같은 너비의 열 세 개를 만들고 주요 항목이 두 열과 두 행에 걸치도록 배치합니다.
<div class="… grid-cols(3) gap-xs"> <div class="… grid-col-span(2) grid-row-span(2)">Feature</div> <div>Notes</div> <div>Drafts</div> <div>Archive</div> <div>Shared</div> <div>Trash</div></div>생성된 CSS
@layer theme { :root, :host { --spacing-xs: .5rem }}@layer utilities { .grid-cols\(3\) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) } .gap-xs { gap: var(--spacing-xs) } .grid-col-span\(2\) { grid-column: span 2/span 2 } .grid-row-span\(2\) { grid-row: span 2/span 2 }}사용자 정의
프리셋은 이 클래스를 @utility로 정의합니다. 스타일시트에서 같은 이름을 정의하면 기존 정의를 대체합니다.
@utility grid-cols(--n <integer>) { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));}@utility grid-rows(--n <integer>) { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--n), minmax(0, 1fr));}@utility grid-col-span(--n <integer>) { grid-column: span var(--n)/span var(--n);}@utility grid-row-span(--n <integer>) { grid-row: span var(--n)/span var(--n);}