css中, grid-auto-rows: 怎样简写在grid:中

本文主要是介绍css中, grid-auto-rows: 怎样简写在grid:中，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目前没有发现 grid-auto-rows: 在 grid:中的简写办法

在CSS Grid布局中，grid-auto-rows 属性用于指定自动生成的网格容器的行的大小。如果你想要将 grid-auto-rows 的值简写在 grid 属性中，你需要按照 grid 属性的语法结构来进行。

grid 属性是一个简写属性，用于设置以下网格容器的属性（按顺序）：

grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow

然而，要注意的是，grid 属性并不能接受所有这些值的任意组合。它主要是为了简化同时设置 grid-template-rows 和 grid-template-columns 的语法。其他属性，如 grid-auto-rows，通常还是需要单独设置。

但是，如果你想要设置 grid-auto-rows 和其他相关属性，你可能需要这样写：

.container {grid-template-rows: repeat(3, auto); /* 或者其他你想要的行高设置 */grid-template-columns: 1fr 1fr 1fr; /* 或者其他你想要的列宽设置 */grid-auto-rows: 100px; /* 设置自动生成的行的高度 */
}

上面的代码中，grid-template-rows 和 grid-template-columns 被用来定义网格的行列结构，而 grid-auto-rows 被用来定义当网格容器中的内容超出明确定义的行时所创建的隐式行的高度。

如果你真的想要尽可能使用 grid 属性来简写，并且只关心行和列的大小，你可以这样做：

.container {grid: repeat(3, auto) / 1fr 1fr 1fr;
}

但在这个简写中，你并没有设置 grid-auto-rows。对于 grid-auto-rows 的值，你还是需要单独设置，因为 grid 属性不支持直接包含 grid-auto-rows 的值。所以，对于 grid-auto-rows 的设置，你还是需要使用完整的属性名来指定。

目前（截至我的知识截止日期），CSS Grid规范并没有提供在 grid 属性中直接包含 grid-auto-rows 或 grid-auto-columns 的值的方式。因此，这些属性通常需要单独声明。

在CSS Grid布局中，grid-auto-rows 属性用于指定自动生成的网格行的大小。然而，grid 简写属性主要用于设置 grid-template-rows 和 grid-template-columns，它并不直接支持简写 grid-auto-rows。

grid 属性的语法是这样的：

grid: grid-template-rows / grid-template-columns;

或者，如果还包含了 grid-template-areas：

grid: grid-template-areas grid-template-rows / grid-template-columns;

但是，你不能直接在 grid 属性中包含 grid-auto-rows 的值。相反，你需要单独设置 grid-auto-rows 属性。例如：

.container {grid: auto / 1fr 1fr 1fr; /* 这将设置 grid-template-rows 为 auto 和 grid-template-columns 为 1fr 1fr 1fr */grid-auto-rows: 100px; /* 然后单独设置自动生成的行的高度 */
}

在上面的代码中，grid 属性设置了网格的模板行和列的大小，而 grid-auto-rows 则单独设置了当内容超出明确定义的行时所创建的隐式行的高度。

如果你想要同时设置 grid-template-rows、grid-template-columns 和 grid-auto-rows，你需要这样做：

.container {grid-template-rows: repeat(3, auto); /* 设置模板行的高度 */grid-template-columns: 1fr 1fr 1fr; /* 设置模板列的宽度 */grid-auto-rows: 100px; /* 设置自动生成的行的高度 */
}