Kevin Powell - Community•14mo ago

Two column layout using four divs

Hello, I'm looking for suggestions on how to create the layout attached. Ordinarily this wouldn't cause too many issues. However, I am unable to change the markup and hence need to make this responsive with the following markup.

<div class="product__cols">
  <div class="product__col"></div>
  <div class="product__col"></div>
  <div class="product__col"></div>
  <div class="product__col"></div>
</div>

<div class="product__cols">
  <div class="product__col"></div>
  <div class="product__col"></div>
  <div class="product__col"></div>
  <div class="product__col"></div>
</div>

I've been playing and my attempt is in the codepen below… https://codepen.io/grantsmith/pen/ZEVgypM The main issue with this version is, the right hand divs equal the height of the left column. Hence gaps. The right hand divs need to be the height of the content. Second problem is the center line, not sure this can be achieved using Grid. Would flex be a better option? That will probably present new issues?

Grant Smith

CodePen

Grid Playing

...

7 Replies

Jochem•14mo ago

you can use grid with grid-template-areas and adjust the areas in a media query

MarkBoots•14mo ago

without even needing media queries

.product__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(200px,50%), 1fr));
}
.product__cols > .product__col:first-child {
  grid-row-end: span 4;
}

.product__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(200px,50%), 1fr));
}
.product__cols > .product__col:first-child {
  grid-row-end: span 4;
}

GrantOP•14mo ago

Great thanks. Any thoughts on the boarder in the middle?

MarkBoots•14mo ago

ah, i forgot about that. yea, then a media query would be usefull after all. https://codepen.io/MarkBoots/pen/oNmvzMe

Mark Boots

CodePen

Grid Playing

...

GrantOP•14mo ago

Awesome 🙌 Thank you

MarkBoots•14mo ago

you can also do it with css columns btw. maybe even easier https://codepen.io/MarkBoots/pen/dyabpxd

GrantOP•14mo ago

Of course! Completely forgot about css columns. Thanks again, plenty of options, don't know why they didn't occur to me beforehand

Gaming

Programming

Two column layout using four divs