How to make a dynamic area in CSS Grid without affecting other areas?

Question

So here is the problem. I want a layout that looks like this, where C grows dynamically with more content.

However, this is what I am getting. Basically, the row of A is growing together with C:

My wrapper code with template-area:

wrapper{
  display: grid;
  grid-template-columns: 0.64fr 1fr 5fr 0.64fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header header"
    ". A C ."
    ". B C .";
}

I've thought about just grouping A and B into a single column, then use flexbox. However, is there a more CSS Grid way of handling this problem?

Answer 1

I would use flexbox for your sidebar and using:

grid-template-areas:
    "header header header header"
    ". sidebar C ."

See demo below:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper{
  display: grid;
  grid-template-columns: 0.64fr 1fr 5fr 0.64fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "header header header header"
    ". sidebar C .";
  height: 100vh;
}

.header {
  grid-area: header;
  background: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background: lightblue;
  display: flex;
  flex-direction: column;
}

.A {
  background: pink;
  
}
.B {
  background: orange;
}

.C {
  grid-area: C;
  background: lightgreen;
}

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="sidebar">
    <div class="A">A</div>
    <div class="B">B</div>
  </div>
  <div class="C">CONTENT</div>
</div>

Another approach would be to have one more row in your CSS grid - note the usage of an psuedo element to fill the space below A and B.

See demo below:

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.wrapper{
  display: grid;
  grid-template-columns: 0.64fr 1fr 5fr 0.64fr;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "header header header header"
    ". A C ."
    ". B C ."
    ". D C .";
  height: 100vh;
}

.wrapper:after {
  content: '';
  display: block;
  grid-area: D;
  background: lightblue;
}

.header {
  grid-area: header;
  background: lightblue;
}

.A {
  grid-area: A;
  background: pink;
  
}
.B {
  grid-area: B;
  background: orange;
}

.C {
  grid-area: C;
  background: lightgreen;
}

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">CONTENT</div>
</div>