CODEWITHSUNDEEP
htmlcsscss-grid
Jens Törnell
Jens Törnell

Reputation: 24758

CSS grid row should span all the way

I use CSS grid in this example. It's not really that important what the grid contains in this case.

The container .wrap has a red background. I want the aside and main row to span all the way down to fill upp the .wrap. It means that the red background should no longer be seen, covered by gray and white.

As seen in this example I use 1fr but that does not do much in this case. I've also tried auto but with no difference.

* {
  padding: 0;
  margin: 0;
  color: #fff;
}

.wrap {
  height: 300px;
  background: red;
}

.content {
  background: green;
  display: grid;

  grid-template-areas: "header header"
                        "aside main"
                       "footer footer";
                       
  grid-template-columns: 300px 1fr;
  grid-template-rows: 48px 1fr 50px;
}

header {
  grid-area: header;
  background: black;
}

aside {
  grid-area: aside;
  background: #333;
}

main {
  grid-area: main;
  background: #fff;
  color: #000;
}

footer {
  grid-area: footer;
  background: blue;
}
<div class="wrap">
  <div class="content">
    <header>Header</header>
    <aside>Aside</aside>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</div>

Upvotes: 3

Views: 564

Answers (3)

Igor Canario
Igor Canario

Reputation: 25

You can do it setting height

    * {
      padding: 0;
      margin: 0;
      color: #fff;
    }

    .wrap {
      height: 300px;
      background: red;
    }

    .content {
      background: green;
      display: grid;

      grid-template-areas: "header header"
                            "aside main"
                           "footer footer";
                           
      grid-template-columns: 300px 1fr;
      grid-template-rows: 48px 1fr 50px;
    }

    header {
      grid-area: header;
      background: black;
    }

    aside {
      grid-area: aside;
      background: #333;
      height: 500px;
    }

    main {
      grid-area: main;
      background: #fff;
      color: #000;
      height: 500px;
    }

    footer {
      grid-area: footer;
      background: blue;
    }
    <div class="wrap">
      <div class="content">
        <header>Header</header>
        <aside>Aside</aside>
        <main>Main</main>
        <footer>Footer</footer>
      </div>
    </div>

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30360

If I understand your question correctly, then this should be possible by adding height:100% to .content which will cause the <aside> and <main> elements to vertically expand to fill the .wrap element:

* {
  padding: 0;
  margin: 0;
  color: #fff;
}

.wrap {
  height: 300px;
  background: red;
}

.content {
/* Add this */
  height:100%;
  background: green;
  display: grid;

  grid-template-areas: "header header"
                        "aside main"
                       "footer footer";
                       
  grid-template-columns: 300px 1fr;
  grid-template-rows: 48px 1fr 50px;
}

header {
  grid-area: header;
  background: black;
}

aside {
  grid-area: aside;
  background: #333;
}

main {
  grid-area: main;
  background: #fff;
  color: #000;
}

footer {
  grid-area: footer;
  background: blue;
}
<div class="wrap">
  <div class="content">
    <header>Header</header>
    <aside>Aside</aside>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</div>

Upvotes: 3

Andy Hoffman
Andy Hoffman

Reputation: 19109

You need to set height: 100% on .content as well, so that the grid fills the .wrap parent which sets the height.

* {
  padding: 0;
  margin: 0;
  color: #fff;
}

.wrap {
  height: 300px;
  background: red;
}

.content {
  background: green;
  display: grid;

  grid-template-areas: "header header"
                        "aside main"
                       "footer footer";
                       
  grid-template-columns: 300px 1fr;
  grid-template-rows: 48px 1fr 50px;
  height: 100%; /* Added */
}

header {
  grid-area: header;
  background: black;
}

aside {
  grid-area: aside;
  background: #333;
}

main {
  grid-area: main;
  background: #fff;
  color: #000;
}

footer {
  grid-area: footer;
  background: blue;
}
<div class="wrap">
  <div class="content">
    <header>Header</header>
    <aside>Aside</aside>
    <main>Main</main>
    <footer>Footer</footer>
  </div>
</div>

Upvotes: 5

Related Questions