Flexbox 和 Grid
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>); |
示例(Examples)
¥Examples
指定网格列(Specifying the grid columns)
¥Specifying the grid columns
使用 grid-cols-<number>
工具(如 grid-cols-2
和 grid-cols-4
)来创建具有 n 个大小相等的列的网格:
¥Use grid-cols-<number>
utilities like grid-cols-2
and grid-cols-4
to create grids with n equally sized columns:
01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-4 gap-4"><div>01</div><!-- ... --><div>09</div></div>
实现子网格(Implementing a subgrid)
¥Implementing a subgrid
使用 grid-cols-subgrid
工具采用项目父级定义的列轨道:
¥Use the grid-cols-subgrid
utility to adopt the column tracks defined by the item's parent:
01
02
03
04
05
06
<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>
使用自定义值(Using a custom value)
¥Using a custom value
使用 grid-cols-[<value>]
语法 根据完全自定义的值设置 columns:
<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()
函数。
响应式设计(Responsive design)
¥Responsive design
在 grid-template-columns
工具前面使用断点变体如 md:
仅在 medium 屏幕尺寸及以上时应用工具:
<div class="grid grid-cols-1 md:grid-cols-6 ..."> <!-- ... --></div>
请参阅 变体文档 详细了解如何使用变体。