Skip to content

grid-template-rows

grid-template-rows 该属性是基于 网格行 的维度,去定义网格线的名称和网格轨道的尺寸大小。

<https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-rows>

用法

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

指定网格中的行

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

html
&lt;div class="grid grid-rows-4 grid-flow-col gap-4">
  &lt;div>01&lt;/div>
  &lt;div>02&lt;/div>
  &lt;div>03&lt;/div>
  &lt;div>04&lt;/div>
  &lt;div>05&lt;/div>
&lt;/div>

共 20 个模块,1301 篇 Markdown 文档。