我真的很喜欢 grid-template-areas
的简单性和易操作性,但是有没有更简单的方法/快捷方式来指示一个区域跨越多列(比如 12)——在模板中?
当您有 12 列时,这开始变得非常恶心...
.wrapper{
display: grid;
grid-template-areas:
"nav nav cont cont cont cont cont cont cont cont cont cont";
@media all and (max-width: 839px){
grid-template-areas:
"nav nav cont cont cont cont";
}
}
最佳答案
命名区域只是命名线的快捷方式,因此您可以使用其中任何一个。例如,您的 12 列代码可以改写为:
.wrapper{
display: grid;
grid-template-columns: [nav-start] repeat(2, auto) [nav-end cont-start] repeat(10, auto) [cont-end];
}
-start
和 -end
行名称定义命名区域的方式与 grid-template-areas
相同,有时使用起来更方便。
(也就是说,我建议通常按照@temani-afif 所说的去做,而不是只使用两个有意义的列,使用 fr
单位来指定它们的相对大小。文字 12 列网格是一个神器网格系统必须克服的旧限制。但另一方面,使用实际的多列有时更清晰,尤其是当您在列之间使用间隙时。做最适合您的事情.)
关于css - 使用 CSS grid-template-areas 跨越多列的更简单方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52359428/