网格列

示例

跨列

使用 col-span-<number> 工具类，如 col-span-2 和 col-span-4，使元素跨越 n 列：

<div class="grid grid-cols-3 gap-4">
  <div class="...">01</div>
  <div class="...">02</div>
  <div class="...">03</div>
  <div class="col-span-2 ...">04</div>
  <div class="...">05</div>
  <div class="...">06</div>
  <div class="col-span-2 ...">07</div>
</div>

起始和结束线

使用 col-start-<number> 或 col-end-<number> 工具类，如 col-start-2 和 col-end-3，使元素在 n 网格线处开始或结束：

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-4 col-start-2 ...">01</div>
  <div class="col-start-1 col-end-3 ...">02</div>
  <div class="col-span-2 col-end-7 ...">03</div>
  <div class="col-start-1 col-end-7 ...">04</div>
</div>

这些工具类也可以与 col-span-<number> 工具类结合使用，以跨越特定数量的列。

使用自定义值

Use utilities like col-[<value>],col-span-[<value>],col-start-[<value>], and col-end-[<value>] to set the 网格列的大小和位置 based on a completely custom value:

<div class="col-[16_/_span_16] ...">
  <!-- ... -->
</div>

For CSS variables, you can also use the col-(<custom-property>) syntax:

<div class="col-(--my-columns) ...">
  <!-- ... -->
</div>

This is just a shorthand for col-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix grid-column,grid-column-start, and grid-column-end utilities with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="col-span-2 md:col-span-6 ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.