网格轨道

类

grid-cols() 和 grid-rows() 创建 Grid；span 函数则将项目放入已有的 Grid。

轨道数量与项目布局由不同元素负责

grid-cols(3) 设置 display: grid 和三个 minmax(0, 1fr) 列。grid-rows(3) 设置三个相同规格的行，并设置 grid-auto-flow: column。其余布局都采用默认值时，相同的六个子元素在第一种情况下横向填入，在第二种情况下则向下填入。

两个 Grid 使用相同的六个子元素与间隙。grid-rows(3) 还设置 grid-auto-flow: column，grid-cols(3) 则保留默认的行向流动。方块高度由内容决定。

文字说明

1. 第一个 Grid 有三个显式 minmax(0, 1fr) 列。默认行向流动将项目 1、2、3 放在第一行，接着放入 4、5、6。
2. 第二个 Grid 有三个显式 minmax(0, 1fr) 行，并沿列自动布局。项目 1、2、3 填满第一列，4、5、6 填入第二列。
3. 两个场景都使用实际预设 CSS、六个相同且由内容决定尺寸的方块，以及 12px 间隙。外部宽度使方块宽度便于比较；这两个组合样式本身都不提供该间隙或宽度。
4. 图中使用默认项目布局。显式指定位置或跨越数可能改变结果；grid-cols 不会重置其他位置建立的列向流动。

轨道数量和跨越数都必须使用正整数。轨道函数不会添加间隙。等分比例分配扣除间隙后的可用空间；零最小值允许轨道缩小，但本身不会让内容换行或裁剪内容。

grid-col-span(2) 和 grid-row-span(2) 设置项目的布局，不会设置父元素的 display。跨越数超出显式建立的 Grid 时，可能产生隐式轨道。跨断点协调轨道数量和跨越数的方法，见布局指南。

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>

@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);}

另见 工具类定义与布局.