Just-in-Time: The Next Generation of Tailwind CSS
Tailwind CSS on GitHub

Grid Template Columns

用于在网格布局中指定列的功能类。

Default class reference

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

使用方法

使用 grid-cols-{n} 功能类来创建有 n 个同等大小的列的网格。

1
2
3
4
5
6
7
8
9
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

响应式

要在特定的断点处控制网格的列,可以在任何现有的 grid-template-columns 功能类前添加 {screen}: 前缀。例如,使用 md:grid-cols-6 来仅在中等尺寸及以上的屏幕上应用 grid-cols-6 功能类。

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

关于 Tailwind 的响应式设计功能的更多信息,请查看 响应式设计 文档。

定制

By default, Tailwind includes grid-template-column utilities for creating basic grids with up to 12 equal width columns. You change, add, or remove these by customizing the gridTemplateColumns section of your Tailwind theme config.

在这里您可以直接访问 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',
        }
      }
    }
  }

主题自定义文档 中了解更多关于自定义默认主题的信息。

变体

默认情况下, 针对 grid-template-columns 功能类,只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 gridTemplateColumns 属性来控制为 grid-template-columns 功能生成哪些变体。

例如,这个配置将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       gridTemplateColumns: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 grid-template-columns 功能,您可以通过在配置文件的 corePlugins 部分将 gridTemplateColumns 属性设置为 false 来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gridTemplateColumns: false,
    }
  }