Easier way use CSS grid-template-areas to span multiple columns

465 views css
0

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?

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

answered question

1 Answer

11

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

Example:

.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>

posted this

Have an answer?

JD

Please login first before posting an answer.