Looking for help on creating a specific CSS Grid layout

Question

I've been struggling to create this specific layout using CSS Grid. It needs to be fixed and I've come to create the grid container being 1100px wide including gutters and siding but the gaps can be ignored for sake of just making the layout.

Basically it's two columns. One is 75% and the other is 25%. There are six grid areas. What stumps me is in regards to the varying row heights and if this is a case where implicit grid comes into place or not.

I've designed what I'd like the layout to be including the fixed sizes. The gaps are all 20px except for the outside left and right which are 40px but again this can be ignore for sake of creating the layout.

The markup is as follows:

<div id="page-wrapper">
  <div class="grid-container">

    <div class="1"></div>

    <div class="2"></div>

    <div class="3"></div>

    <div class="4"></div>

    <div class="5"></div>

    <div class="6"></div>

  </div>
</div>

I've been trying to explicitly define each area to no avail. Perhaps I'm missing something. Here's the layout design

https://imgur.com/a/af5J82b

And here's a codepen where you can see I can't get items5 and item6 to fill height wise correctly.

https://codepen.io/chris-c-thomas/pen/gzJpmZ?editors=1100

Thanks!

Answer 1 · 2018-05-30T18:27:17Z

May 30, 2018 6:27pm

I think that the issue is that you don't have enough rows. Based on your layout design it looks like item 5 is supposed to end at approximately the mid-point of item 2, and that is where item 6 is supposed to start. I don't think there is currently a way with CSS grid to specify an item spanning a percent of a grid track.

However, instead of making a single middle row with a height of 300px, you could have two rows each 150px tall. Then just have item 2 span the two rows to get your desired height.

Try pasting this into the CSS area of your codepen and see if it gives you the results you want:

#homepage-wrapper {
      background: #f2f2f2;

      width: 1100px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: 375px 375px 250px;
      grid-template-rows: 200px 150px 150px 200px;
      grid-gap: 20px;
    }

    .item1 {
      background: red;
      grid-column: 1 / 3;
      grid-row: 1 / 2;
    }

    .item2 {
      background: green;
      grid-column: 1 / 3;
      grid-row: 2 / 4;
    }

    .item3 {
      background: blue;
      grid-column-start: 1;
    }

    .item4 {
      background: yellow;
    }

    .item5 {
      background: orange;
      grid-column-start: 3;
      grid-row: 1 / 3;
    }

    .item6 {
      background: purple;
      grid-column-start: 3;
      grid-row: 3 / 5;
    }

Answer 2 · 2018-05-30T18:30:10Z

May 30, 2018 6:30pm

Hi there! I came up with something similar to the above post. I can't tell exactly how tall you want the 5th section to be, but to get the 6th section down to extend down to where the 5th is I edited your .item6 to be:

.item6 {
  background: purple;
  grid-column-start: 3;
  grid-row: 2 / 4;
  //height: 360px;
}

Hope this helps!

Answer 3 · 2018-05-30T20:01:12Z

May 30, 2018 8:01pm

Thank you both Jeremy Lapine and Jennifer Nordell for your help. This is the right approach and I've gotten the desired layout. Thanks!

Welcome to the Treehouse Community

Looking to learn something new?

Chris Thomas

Chris Thomas

Looking for help on creating a specific CSS Grid layout

3 Answers

Jeremy Lapine

Jeremy Lapine

Jennifer Nordell

Jennifer Nordell

Chris Thomas

Chris Thomas