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

css 复制代码

grid-auto-rows:100px; grid-template-columns:1fr 1fr;
👆可以写成👇
grid:auto-flow 100px / 1fr 1fr;

在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 和其他相关属性，你可能需要这样写：

css 复制代码

.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 属性来简写，并且只关心行和列的大小，你可以这样做：

css 复制代码

.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 属性的语法是这样的：

css 复制代码

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

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

css 复制代码

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

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

css 复制代码

.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，你需要这样做：

css 复制代码

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

总结来说，你不能在 grid 简写属性中直接包含 grid-auto-rows 的值。你需要单独设置这个属性来定义自动生成的行的高度。这是由CSS Grid规范的当前设计决定的，它要求某些属性必须单独设置，而不是通过 grid 简写属性来设置。

"grid-auto-rows: 100px ; grid-template-columns: 100px 200px 300px; " 怎样简写在"grid"中

在CSS Grid布局中，你可以使用grid属性来简写多个grid相关的属性。然而，需要注意的是，grid属性是一个复合属性，它允许你设置grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns和grid-auto-flow的值，但它并不总是提供与单独设置这些属性完全相同的灵活性。

对于你给出的具体例子：

css 复制代码

grid-auto-rows: 100px;
grid-template-columns: 100px 200px 300px;

你可以尝试使用grid属性来简写，但不幸的是，grid-auto-rows不能与grid-template-columns直接合并在grid属性中，因为grid属性主要用于设置grid-template-*属性，并且它期望行和列的值成对出现。

然而，你可以单独为grid-template-columns使用grid属性的一个简化形式，但这样你就无法同时简写grid-auto-rows了。例如：

css 复制代码

grid: auto-flow / 100px 200px 300px;

在这个简写中，auto-flow是grid-auto-flow的值，它控制自动放置算法如何工作，而/ 100px 200px 300px设置了grid-template-columns。但是，这个简写并没有包含grid-auto-rows的值。

因此，目前没有一个直接的方法可以使用grid属性来同时简写grid-auto-rows和grid-template-columns。你需要继续使用你原来的写法，分别设置这两个属性。在未来，CSS规范可能会扩展grid属性的功能，以允许更多的简写形式，但在撰写本文时（2023年），情况仍然如此。

在CSS Grid布局中，grid属性是一个简写属性，用于设置grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns以及grid-auto-flow的值。但是，它并不能完全替代所有这些属性，特别是在需要独立控制它们的时候。

对于你想要简写的样式：

css 复制代码

grid-auto-rows: 100px;
grid-template-columns: 100px 200px 300px;

你不能直接将这两个属性合并成一个grid属性的值，因为grid属性要求你同时指定行和列的值，而且它主要关注于grid-template-*属性的设置，而不是grid-auto-*属性。

不过，你可以使用grid属性来设置grid-template-columns，但你需要显式地指定行的值，即使它们不是你想要通过grid-auto-rows设置的自动行。例如：

css 复制代码

grid: auto / 100px 200px 300px;

在这个例子中，auto关键字用于行的值，它实际上并不设置grid-auto-rows，而是指定了grid-template-rows的默认值为auto，意味着行高将基于内容自动调整。而/ 100px 200px 300px则设置了grid-template-columns。

如果你想要同时设置grid-auto-rows和grid-template-columns，并且希望grid-auto-rows有一个固定的值（如100px），那么你不能通过grid属性来实现这一点，你需要继续分别设置这两个属性，就像你原来做的那样：

css 复制代码

grid-auto-rows: 100px;
grid-template-columns: 100px 200px 300px;

目前，CSS规范并没有提供一种方法来在grid属性中同时简写grid-auto-rows和grid-template-columns。因此，为了保持代码的清晰和可维护性，建议继续分别设置这两个属性。

经试验, 我终于找出了简写的方法:

css 复制代码

grid-auto-rows:100px; grid-template-columns:1fr 1fr;
👆可以写成👇
grid:auto-flow 100px / 1fr 1fr;

css 复制代码

grid-auto-rows :666px ; grid-template-columns:333px 666px auto 1fr 2fr;
👆可以写成👇
grid : auto-flow 666px / 333px 666px auto 1fr 2fr

css 复制代码

grid-auto-rows :100px 80px 60px 40px; grid-template-columns:1fr 1fr 1fr;
👆可以写成👇
grid:auto-flow 100px / 1fr 1fr;

css 复制代码

grid-auto-rows :100px 80px 60px 40px; grid-template-columns:1fr 2fr 3fr 100px 200px;
👆可以写成👇
grid : auto-flow 100px 80px 60px 40px / 1fr 2fr 3fr 100px 200px