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

137 阅读3分钟

目前没有发现 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-rowsgrid-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-rowsgrid-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-rowsgrid-auto-columns 的值的方式。因此,这些属性通常需要单独声明。




在CSS Grid布局中,grid-auto-rows 属性用于指定自动生成的网格行的大小。然而,grid 简写属性主要用于设置 grid-template-rowsgrid-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-rowsgrid-template-columnsgrid-auto-rows,你需要这样做:

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

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
















\