使用CSS网格模板区域来跨多列的更简单方法 [英] Easier way use CSS grid-template-areas to span multiple columns

问题描述

我真的很喜欢 grid-template-areas 的简单易用，但是是否有一种更简单的方法/捷径来指示一个区域跨越多列（例如12 ）—在模板中？

I really love the simplicity and ease of manipulation of grid-template-areas, but is there an easier way/shortcut to indicate an area spans multiple columns (say 12) — within the template?

当您有12列时，这开始变得很粗俗了。

This starts to get pretty gross when you have 12 columns...

.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";
  }
}

推荐答案

您可以将其与 grid-template-columns 结合使用，例如：

You can combine it with grid-template-columns like this:

.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网格模板区域来跨多列的更简单方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！