Four items in two columns

Question

I have this HTML

<div class='wrapper'>
 <div class='item-1'>One</div>
 <div class='item-2'>Two</div>
 <div class='item-3'>Three</div>
 <div class='item-4'>Four</div>
</div>

In CSS, is it possible for me to create a two column grid where item-1 and item-2 are in the first column, and item-3 and item-4 are in the second?

The heights of the divs are variable, so this is not strict 2x2 grid.

Basically, I'd like it to look like the example below, but I do not have the luxury of wrapping my items.

THANKS!

.wrapper {
  display:grid;
  grid-template-columns: 1fr 1fr;
}

    <div class='wrapper'>
      <div class='wrapper-1'>
       <div class='item-1' style='height:100px;background-color:red;'>One</div>
       <div class='item-2' style='height:80px;background-color:blue;'>Two</div>
     </div>
     <div class='wrapper-2'>
       <div class='item-3' style='height:40px;background-color:orange;'>Three</div>
       <div class='item-4' style='height:40px;background-color:green;'>Four</div>
      </div>
    </div>

This other [SO question](https://stackoverflow.com/q/44906501/17300) may help, but my gut feeling is flex layout could accomplish this easier than grid layout ... do you have that option? (I'm not good enough at either to attempt an actual answer, thus commenting) — Stephen P, Aug 15 '18 at 21:24
This is not possible with CSS grid alone as it works in two dimensions unless you created miniature rows and knew your content was going to span N number of rows. — Steven B., Aug 15 '18 at 21:37
thanks all for the quick reply. i am not convinced that the masonry grid duplicate answer is right. in that case one is declaring how many rows an element can span, but that is not my situation. my coworker pointed me at this page. https://css-tricks.com/arranging-elements-top-bottom-instead-left-right-float. i have it working using the flexbox approach outlined ... but it does involve specifying a max-height for the container and some widths for the elements. with flex-wrap it will then wrap the elements and it looks rights. feels a bit dirty, but does work in my case as i can set max-width. — Andrew Thornton, Aug 16 '18 at 01:18
@dippas could you reflect if this question really has been answered by your referenced answer? i am not convinced it has. thanks. — Andrew Thornton, Aug 16 '18 at 16:02

score 0 · Accepted Answer · edited Aug 17 '18 at 03:16

0

The CSS for the wrapper is correct. The only thing you need to specify is from which line of the grid should each item start and end.

.item-1, 
.item-2{
grid-column: 1/2;
width: 100%;
}

.item-3, 
.item-4{
grid-column: 3/4;
width: 100%;
}

edited Aug 17 '18 at 03:16

Nisarg

1,631
6
19
31

answered Aug 15 '18 at 22:06

Alexander

161
8

Michał Drabik · Answer 2 · 2018-08-15T21:45:30.260

-1

This should suit your needs. Note that the wrapper needs to have an explicit height in order for the columns to wrap, otherwise it's going to endlessly expand.

.wrapper {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.item {
  width: 50%;
}

.i-1 {
  height: 100px;
  background-color: green;
}

.i-2 {
  height: 80px;
  background-color: red;
}

.i-3 {
  height: 40px;
  background-color: blue;
}

.i-4 {
  height: 40px;
  background-color: yellow;
}

<div class='wrapper'>
 <div class='item i-1'>One</div>
 <div class='item i-2'>Two</div>
 <div class='item i-3'>Three</div>
 <div class='item i-4'>Four</div>
</div>

edited Aug 15 '18 at 21:45

answered Aug 15 '18 at 21:22

Michał Drabik

425
4
8

**The heights of the divs are variable, so this is not strict 2x2 grid.** – Temani Afif Aug 15 '18 at 21:23
this might be not working. as per code, item1 and item2 have different height – Nisarg Aug 15 '18 at 21:24
For the scenario I actually need, I think this is a good solution. I be interested to know if there are any other approaches. Unless there is something I am missing, I do not believe the CSS Grid / Masonry solution is quite right. Seems like it does have to be Flexbox with a fixed height and column wrapping. Luckily, I can probably get away using max-height and having cover a range, so that my items can grow a little (but not a ton). – Andrew Thornton Aug 16 '18 at 01:46

Four items in two columns

2 Answers2