grid-template-columns

用于指定网格布局中列的工具类。

快速参考

类	属性
grid-cols-<number>	grid-template-columns: repeat(<number>, minmax(0, 1fr));
grid-cols-none	grid-template-columns: none;
grid-cols-subgrid	grid-template-columns: subgrid;
grid-cols-[<value>]	grid-template-columns: <value>;
grid-cols-(<custom-property>)	grid-template-columns: var(<custom-property>);

示例

指定网格列

使用 grid-cols-2 和 grid-cols-4 等 grid-cols-<number> 工具类，创建具有 n 列等宽的网格：

01

02

03

04

05

06

07

08

09

<!-- [!code classes:grid-cols-4] -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

实现子网格

使用 grid-cols-subgrid 工具类，沿用该项目父级定义的列轨道：

01

02

03

04

05

06

<!-- [!code classes:grid-cols-subgrid] -->
<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="col-span-3 grid grid-cols-subgrid gap-4">
    <div class="col-start-2">06</div>
  </div>
</div>

使用自定义值

使用 grid-cols-[<value>] 等工具类，按完全自定义的值设置列：

<div class="grid-cols-[200px_minmax(900px,_1fr)_100px] ...">
 <!-- ... -->
</div>

对于 CSS 变量，你也可以使用 grid-cols-(<custom-property>) 语法：

<div class="grid-cols-(--my-grid-cols) ...">
 <!-- ... -->
</div>

这只是 grid-cols-[var(<custom-property>)] 的简写，会自动为你添加 var() 函数。

响应式设计

使用 md: 等断点变体作为 grid-template-columns 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

<div class="grid grid-cols-1 md:grid-cols-6 ...">
 <!-- ... -->
</div>

在变体文档中了解有关使用变体的更多信息。