网格模板列 - Tailwind CSS

Quick reference

Class	Properties
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6	grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7	grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8	grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9	grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10	grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11	grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none	grid-template-columns: none;
grid-cols-subgrid	grid-template-columns: subgrid;

基础用法

指定网格中的列

使用 grid-cols-* 实用程序创建具有 n 个大小相同的列的网格。

<div class="grid grid-cols-4 gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

子网格

使用 grid-cols-subgrid 实用程序来采用该项目父级定义的列轨道。

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

条件应用

悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:grid-cols-6 来仅在 hover应用 grid-cols-6.

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

详细了解, 请参考 Hover, Focus, & Other States 文档.

断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:grid-cols-6 来应用 grid-cols-6 程序，适用于中等屏幕尺寸及以上。

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

进一步了解，请参考响应式设计, 暗黑模式和媒体查询.

使用自定义值

定制你的主题

默认情况下，Tailwind 包含 grid-template-column 实用程序，用于创建最多具有 12 个等宽列的基本网格。您可以通过在 tailwind.config.js 文件中编辑 theme.gridTemplateColumns 或 theme.extend.gridTemplateColumns 来自定义这些值。

您可以在此处直接访问 grid-template-columns CSS 属性，因此您可以根据需要将自定义列值设置为通用的、复杂的或特定于站点的。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        // Simple 16 column grid
        '16': 'repeat(16, minmax(0, 1fr))',

        // Complex site-specific column configuration
        'footer': '200px minmax(900px, 1fr) 100px',
      }
    }
  }
}

在 theme customization 文档中了解有关自定义默认主题的更多信息。

任意值

如果您需要使用一次性的 grid-template-columns值，而该值没有必要包含在主题中，请使用方括号动态生成属性，使用任意值。

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

进一步了解，请参考任意值文档.

On this page