Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Looking for help on creating a specific CSS Grid layout

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!

3 Answers

Jeremy Lapine
Jeremy Lapine
15,247 Points

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;
    }
Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

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! :sparkles:

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