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列网格是旧的伪像但另一方面，有时使用实际的多列有时会更清楚，尤其是如果您使用的是列之间的间隙。请执行最适合您的操作。）< / p>

Answer 2

您可以像这样将其与grid-template-columns组合：

.wrapper{
  display: grid;
  grid-template-areas:
    "nav cont";
  grid-template-columns:2fr 10fr;

  @media all and (max-width: 839px){
    grid-template-areas:
      "nav cont";
    grid-template-columns:1fr 4fr;
  }
}

示例：

.wrapper {
  display: grid;
  grid-template-areas: "nav cont";
  grid-template-columns: 2fr 10fr;
}

.nav {
  grid-area: nav;
  height: 100px;
  background: red;
}

.cont {
  grid-area: cont;
  height: 100px;
  background: blue;
}

@media all and (max-width: 839px) {
  .wrapper {
    grid-template-areas: "nav cont";
    grid-template-columns: 1fr 4fr;
  }
}

<div class="wrapper">
  <div class="nav">
  </div>
  <div class="cont">
  </div>
</div>

使用CSS网格模板区域来跨多列的更简单方法

2 个答案: