Looking for asssitance in creating specific fixed 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

Any help or point in the right direction regarding the styles would be much appreciated! Thanks.

Here's a clue....it's actually 3 columns and 4 rows for CSS-Grid purposes. — Paulie_D
– Paulie_D, Commented May 30, 2018 at 15:48
@Paulie_D Interesting. I can see 3 columns but the 4 rows are harder to visualize. Is each row half the height of 5 & 6? I've been trying to use grid template areas to define each section. — Chris
– Chris, Commented May 30, 2018 at 16:52
@Kaddath Here is a codepen I've been playing with. I can't get 5 and 6 to be the correct heights. codepen.io/chris-c-thomas/pen/gzJpmZ?editors=1100 — Chris
– Chris, Commented May 30, 2018 at 17:12

Paulie_D · Accepted Answer · 2018-05-30 19:15:32Z

You need to visualise the layout as 3 columns and 4 rows. Something like:

2 columns of 365px and another of 250px
1 row of 200px, 2 rows of 160px and a final row again of 200px.

Some items will span two rows or columns.

Here's a visual layout.

So your columns and rows would be:

  grid-template-columns: 365px 365px 250px;
  grid-template-rows: 200px 160px 160px 200px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.grid-container div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border: 1px solid blue;
}

.grid-container {
  display: grid;
  margin: 1em auto;
  grid-gap: 20px;
  border: 1px solid red;
  width: 1100px;
  grid-template-columns: 365px 365px 250px;
  grid-template-rows: 200px 160px 160px 200px;
  padding: 20px 40px;
}

.A1 {
  grid-column: 1 / span 2;
}

.A2 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 2;
}

.A3,
.A4 {
  grid-row: 4;
}

.A5 {
  grid-row: 1 / span 2;
}

.A6 {
  grid-row: 3 / span 2;
}

<div class="grid-container">

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

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

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

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

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

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

</div>

https://codepen.io/Paulie-D/pen/zaxzeK

I appreciate your visualization so much! That makes sense now. Thank you for taking the time to help me!

Collectives™ on Stack Overflow

Looking for asssitance in creating specific fixed CSS Grid layout

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related