CODEWITHSUNDEEP
csscss-grid
peterc
peterc

Reputation: 7843

Use css Grid to divide unknow number of items into two columns, but list in column order

I have a number of items I wish to divide into two even columns.

I have an example here

So I have a number of items..

#parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row;
}

.item {
  margin: 5px;
  height: 40px;
  width: 50px;
  background: green;
  color: white;
}
<div id="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

and this gives me

enter image description here

But what I want is for the items to "flow" down the columns, ie they will be in the order

 1        4
 2        5
 3        6

I thought the property grid-auto-flow would do this, but I can't get it to do what I am after

Is there an easy way I can do this (preferably with css grid)?

Upvotes: 2

Views: 919

Answers (1)

connexo
connexo

Reputation: 56744

It doesn't always have to be the latest layout technique; sometimes there already is an older one that was specifically created to get the job at hand done.

That being said, consider using columns, which does what you want, out of the box:

#parent {
  columns: 2;
}

.item {
  break-inside: avoid;
  margin: 5px;
  height: 40px;
  width: 50px;
  background: green;
  color: white;
}
<div id="parent">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

Important Side Note: As @Yousaf has pointed out, this can lead to a single item being spread to two columns, because the browsers tries to make sure both columns are about the same height. To avoid that, simply use

break-inside: avoid;

for the column items.

Upvotes: 3

Related Questions