CSS grid: how to bring elements in same grid area to line up?

Question

My target is to use CSS grid layout for a two-column masonry layout of boxes. Given an element with children:

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

bring the children to sort themselves alternately into columns. My idea was to have two grid areas left and right and telling the children to split into them:

section {
  display: grid;
  grid-template-areas: "left right";
}

div:nth-child(odd) {
  grid-area: left;
}

div:nth-child(even) {
  grid-area: right;
}

Here's a JSBin that illustrates my current state: https://jsbin.com/zaduruv/edit?html,css,output

Unfortunately, the elements react quite identical to as if they had position:absolute set. That is, they all crowd towards the top and overlap one another.

Is there any possibility with the CSS grid layout properties to bring the children to line up in the columns, like they'd do normally with position: static?

have you looked at css-tricks.com/snippets/css/complete-guide-grid? — Winter
– Winter, Commented Mar 9, 2017 at 8:17
I tried to solve this using flexbox: https://jsbin.com/tujuzumaca/edit?html,css,output the only thing you need to make sure is not to give fixed height to the DIVs but to let it take height on its own according to the content. — ANshul Sharma
– ANshul Sharma, Commented Mar 9, 2017 at 8:35
@Winter I actually linked to that page in an answer an hour ago ;-) stackoverflow.com/questions/21588420/… — Boldewyn
– Boldewyn, Commented Mar 9, 2017 at 8:38
@ANshulSharma I think we misunderstood one another. The aim is for the boxes, that do have different heights based on their content, to be laid flush out one under the other, without gaps. I solved this with flexbox, too, using flex-direction: column, but it has the disadvantage, that I need to set a fixed height on the section, otherwise the children wouldn't wrap into a second column. Hence my idea to try and use grid layout. — Boldewyn
– Boldewyn, Commented Mar 9, 2017 at 8:44

beerwin · Accepted Answer · 2019-02-28 13:06:34Z

2

You can't. Since elements can overlap each other in a CSS grid, it doesn't even try to align them. As its name suggests, it is a grid, not a column layout.

A better solution would be to use CSS multi-column layout, as the snippet below.

The only problem with the multi-column layout is, that it distributes the divs vertically instead of horizontally, so you get this:

1 4
2 5
3 6

instead of this:

1 2 
3 4
5 6

section {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    width: 500px;
    background-color: #e0e0e0;
}

div {
  width: 250px;
  display: inline-block;
}

div:nth-child(1) {
  background-color: #c1c0c1;
  height: 100px;
}

div:nth-child(2) {
  background-color: #fedbc1;
  height: 50px;
}

div:nth-child(3) {
  background-color: #dec34a;
  height: 130px;
}

div:nth-child(4) {
  background-color: #ce3294;
  height: 110px;
}

div:nth-child(5) {
  background-color: #99deac;
  height: 80px;
}

div:nth-child(6) {
  background-color: #aade34;
  height: 190px;
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

edited Feb 28, 2019 at 13:06

answered Mar 9, 2017 at 9:03

beerwin

10.5k6 gold badges45 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Boldewyn Over a year ago

Thanks for the answer! Yes, I suspected that that's not grid's scope to do something like that. I experimented with CSS columns, too, but ran into issues, where browsers ignored a child's break-inside: avoid, and smeared that child's content over two columns.

Boldewyn Over a year ago

I'm inclined right now to just give up, add two wrapper elements and sort the children in there manually. Or getting good ol' Masonry.js back in place.

Björn Tantau · Accepted Answer · 2018-07-18 08:25:24Z

1

You have to ditch the grid-areas for this one and work with grid-column-start. Otherwise everything will be put into the same area. https://jsbin.com/peqiwodoba/edit?html,css,output

div:nth-child(odd) {
}

div:nth-child(even) {
  grid-column-start: 2;
}

answered Jul 18, 2018 at 8:25

Björn Tantau

1,61415 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS grid: how to bring elements in same grid area to line up?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related