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
\