Search code examples
htmlcsscss-gridgrid-layout

Nested grid not taking up the enough width?

I want to achieve a layout

like this

But I'm getting output like this:

like this

The seven is too big even though I've gave 0.1fr for it. And there is additional space remaining in height. I want to be able to fix it. How do I fix it? I don't see any way to reduce the height of the "seven" div.

This is what I've tried.

HTML

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 2fr 0.1fr;
  height: 100vh;
  width: 100vw;
}

* {
  margin: 0;
  padding: 0;
}

.header {
  grid-column-start: 1;
  grid-column-end: 5;
  background-color: lightgreen;
  /* height: 20px; */
}

.one {
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: lightpink;
}

.two {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: lightblue;
}

.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: maroon;
}

.four {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: burlywood;
}

.nested-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.five {
  background-color: blue;
  grid-column-start: 1;
  grid-column-end: 2;
}

.six {
  background-color: red;
  grid-column-start: 2;
  grid-column-end: 3;
}

.seven {
  background-color: green;
  grid-column-start: 1;
  grid-column-end: 3;
}
<div class="container">
  <div class="header">header</div>
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
  <div class="four">four</div>
  <div class="nested-container">
    <div class="five">five</div>
    <div class="six">six</div>
    <div class="seven">seven</div>
  </div>
</div>

Here's the Codepen link:

https://codepen.io/pelko/pen/NWzjzxv?editors=1100

Solution

  • You can make your .nested-container take up more grid sections using grid-column-start and grid-column-end I see you did this similarly already to the child divs of .nested-container but not to .nested-container it self.

    I've added this to .nested-container in CSS:

      grid-column-start: 2;
  grid-column-end: 5;

    Working example:

    .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 2fr 0.1fr;
  height: 100vh;
  width: 100vw;
}
* {
  margin: 0;
  padding: 0;
}
.header {
  grid-column-start: 1;
  grid-column-end: 5;
  background-color: lightgreen;
  /* height: 20px; */
}

.one {
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: lightpink;
}
.two {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: lightblue;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: maroon;
}
.four {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: burlywood;
}

.nested-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-column-start: 2;
  grid-column-end: 5;

}
.five{
  background-color:blue;
  grid-column-start:1;
  grid-column-end:2;
  
}
.six{
  background-color:red;
  grid-column-start:2;
  grid-column-end:3;
}
.seven{
  background-color:green;
  grid-column-start:1;
  grid-column-end:3;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="header">header</div>
      <div class="one">one</div>
      <div class="two">two</div>
      <div class="three">three</div>
      <div class="four">four</div>
      <div class="nested-container">
        <div class="five">five</div>
        <div class="six">six</div>
        <div class="seven">seven</div>
      </div>
    </div>
  </body>
</html>

    EDIT:

    It seems from your updated question the only issue you are having is some whitespace at the bottom of your grid. That's simply due to this code:

    grid-template-rows: 0.1fr 1fr 2fr 0.1fr; in your .container

    Remove the last 0.1fr and it should be what you are looking for:

    .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 2fr;
  height: 100vh;
  width: 100vw;
}
* {
  margin: 0;
  padding: 0;
}
.header {
  grid-column-start: 1;
  grid-column-end: 5;
  background-color: lightgreen;
  /* height: 20px; */
}

.one {
  grid-row-start: 2;
  grid-row-end: 4;
  background-color: lightpink;
}
.two {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: lightblue;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: maroon;
}
.four {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: burlywood;
}

.nested-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:3fr 0.2fr;
  grid-column-start: 2;
  grid-column-end: 5;

}
.five{
  background-color:blue;
  grid-column-start:1;
  grid-column-end:2;
  
}
.six{
  background-color:red;
  grid-column-start:2;
  grid-column-end:3;
}
.seven{
  background-color:green;
  grid-column-start:1;
  grid-column-end:3;
  
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="header">header</div>
      <div class="one">one</div>
      <div class="two">two</div>
      <div class="three">three</div>
      <div class="four">four</div>
      <div class="nested-container">
        <div class="five">five</div>
        <div class="six">six</div>
        <div class="seven">seven</div>
      </div>
    </div>
  </body>
</html>