网格模板行 - Tailwind CSS

Quick reference

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

基础用法

指定网格中的行

使用 grid-rows-* 实用程序创建具有 n 个大小相等的行的网格。

<div class="grid grid-rows-4 grid-flow-col gap-4">
  <div>01</div>
  <!-- ... -->
  <div>09</div>
</div>

子网格

使用 grid-rows-subgrid 实用程序采用项目父级定义的行轨道。

<div class="grid grid-rows-4 grid-flow-col gap-4">
  <div>01</div>
  <!-- ... -->
  <div>05</div>
  <div class="grid grid-rows-subgrid gap-4 row-span-3">
      <div class="row-start-2">06</div>
  </div>
  <div>07</div>
  <!-- ... -->
  <div>10</div>
</div>

条件应用

悬停、聚焦和其他状态

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

<div class="grid grid-rows-2 hover:grid-rows-6">
  <!-- ... -->
</div>

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

断点和媒体查询

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

<div class="grid grid-rows-2 md:grid-rows-6">
  <!-- ... -->
</div>

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

使用自定义值

定制你的主题

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

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

tailwind.config.js

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

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

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

任意值

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

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

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

On this page