HTML/CSS How to build this using CSS Grid?

[shivajikobardan]

TL;DR Summary

CSS Grids example

I built these using CSS Grids very easily.

Source: https://www.quackit.com/css/grid/tutorial/create_a_website_layout.cfm

But the first one is different and requires different logic.
I can't use grid-template-areas there for whole grid.

This is my code for the last layout(I've to edit height and width there).

HTML:

<div class="container">
      <div class="header">header</div>
      <div class="leftsidebar">leftsidebar</div>
      <div class="main-top">main top</div>
      <div class="rightsidebar">right side bar</div>
      <div class="bottom-left">bottom left</div>
      <div class="bottom-right">bottom right</div>
      <div class="footer">footer</div>
    </div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header header"
    "leftsidebar main-top main-top rightsidebar"
    "leftsidebar bottom-left bottom-right rightsidebar"
    "footer footer footer footer";
}

.header {
  background-color: skyblue;
  grid-area: header;
}
.leftsidebar {
  background-color: green;
  grid-area: leftsidebar;
}
.main-top {
  background-color: red;
  grid-area: main-top;
}
.rightsidebar {
  background-color: pink;
  grid-area: rightsidebar;
}
.bottom-left {
  background-color: purple;
  grid-area: bottom-left;
}
.bottom-right {
  background-color: yellow;
  grid-area: bottom-right;
}
.footer {
  background-color: blue;
  grid-area: footer;
}

 

[Filip Larsen]

But the first one is different and requires different logic.

One trick for the layout you a trying to achieve is to count consider it to consist of 5 columns instead of 4 and let the 2nd row orange and 3rd row blue and green all span two columns.

Alternatively you can let the two rows span a single column and put two more (independent) grids or similar in each row.

 

[shivajikobardan]

 

[jack action]

I would do it with the help of flex display:

<div class="container">
      <div class="header">header</div>
      <div class="leftsidebar">leftsidebar</div>
      <div class="main-top">
        <div class="top-left">top left</div>
        <div class="top-center">top center</div>
        <div class="top-right">top right</div>
      </div>
      <div class="bottom-left">bottom left</div>
      <div class="bottom-right">bottom right</div>
      <div class="footer">footer</div>
    </div>

.container {
  height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "leftsidebar main-top main-top"
    "leftsidebar bottom-left bottom-right"
    "leftsidebar footer footer";
}

.header {
  background-color: limegreen;
  grid-area: header;
}
.leftsidebar {
  background-color: wheat;
  grid-area: leftsidebar;
}
.main-top {
  grid-area: main-top;
  display: flex;
}
.top-left,
.top-center,
.top-right {
  width: calc(100% / 3);
}
.top-left {
  background-color: lightskyblue;
}
.top-center {
  background-color: indianred;
}
.top-right {
  background-color: moccasin;
}
.bottom-left {
  background-color: deepskyblue;
  grid-area: bottom-left;
}
.bottom-right {
  background-color: yellowgreen;
  grid-area: bottom-right;
}
.footer {
  background-color: darkgoldenrod;
  grid-area: footer;
}

 

[jedishrfu]

Can you do grid within grid?

That’s what we would do in Java gridbag layouts when things didn’t work quite right.

We would create a complex component with one grid layout and insert the component into a bigger grid layout.

 

[shivajikobardan]

Can you do grid within grid?

That’s what we would do in Java gridbag layouts when things didn’t work quite right.

We would create a complex component with one grid layout and insert the component into a bigger grid layout.

nested grids do exist, I tried a bit but could not make it work.

 

[jedishrfu]

Maybe you can find some examples in this tutorial or why your attempt didn't work:

https://www.freecodecamp.org/news/css-grid-tutorial-with-cheatsheet/

 

[jack action]

Using the following CSS with the same HTML as in post #4, I get the same result by having main-top with display set as grid and removing the width of the top containers:

.container {
  height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "header header header"
    "leftsidebar main-top main-top"
    "leftsidebar bottom-left bottom-right"
    "leftsidebar footer footer";
}

.header {
  background-color: limegreen;
  grid-area: header;
}
.leftsidebar {
  background-color: wheat;
  grid-area: leftsidebar;
}
.main-top {
  grid-area: main-top;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.top-left {
  background-color: lightskyblue;
}
.top-center {
  background-color: indianred;
}
.top-right {
  background-color: moccasin;
}
.bottom-left {
  background-color: deepskyblue;
  grid-area: bottom-left;
}
.bottom-right {
  background-color: yellowgreen;
  grid-area: bottom-right;
}
.footer {
  background-color: darkgoldenrod;
  grid-area: footer;
}