css - 使用 CSS grid-template-areas 跨越多列的更简单方法

Question

我真的很喜欢 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";
  }
}

Answer 1

命名区域只是命名线的快捷方式，因此您可以使用其中任何一个。例如，您的 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 列网格是一个神器网格系统必须克服的旧限制。但另一方面，使用实际的多列有时更清晰，尤其是当您在列之间使用间隙时。做最适合您的事情.)