How can I do two columns layout with flexbox and same spacing between items in column?

Question

Hello! Can you help me? I'm trying to do two column layout with same spacing between items in same column.

.flex {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
}

.item {
  width: 45%;
  height: 200px;
  margin-bottom: 10px;
  background-color: navy;
}

.item:nth-child(1) {
  height: 210px;
}

.item:nth-child(2) {
  height: 500px;
}

.item:nth-child(3) {
  height: 360px;
}

.item:nth-child(4) {
  height: 400px;
}

.item:nth-child(5) {
  height: 150px;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Thanks for every good advice & your help!

Can you update your question to include your HTML and CSS please — sol, Mar 05 '18 at 21:29
What do you mean by spacing? Between the columns or between the items in the columns. Also, show us the code you’ve done to work towards this. — SidTheBeard, Mar 05 '18 at 21:30
Confused by the use of flexbox here. All the boxes have a specific height on them, is that just for the demo? — Brett DeWoody, Mar 05 '18 at 23:31

Joseph Marikle · Answer 1 · 2018-03-06T16:42:14.753

You could use column-count instead of flexbox. In this situation, there's no need to implement a flexible box layout. You're not trying to maintain identical sizes or adjust for any odd alignment.

.flex
{
  margin: 0;
  padding-left: 0;
  list-style: none;
  column-count: 2;
  column-gap: 10px;
}

.item{
  height: 200px;
  margin-bottom: 10px;
  background-color: navy;
  break-inside: avoid;
}

.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Here's a way to use percentages for the column gap. It uses 0px column-gap and a negative margin on the container to adjust for the excess margins on the left and right.

.flex
{
  margin: 0;
  padding-left: 0;
  list-style: none;
  column-count: 2;
  column-gap: 0;
  margin: 0 -1.25%;
}

.item{
  height: 200px;
  margin-bottom: 10px;
  background-color: navy;
  break-inside: avoid;
  margin: 0 2.5% 5%;
}

.item:nth-child(1){height: 210px;}
.item:nth-child(2){height: 500px;}
.item:nth-child(3){height: 360px;}
.item:nth-child(4){height: 400px;}
.item:nth-child(5){height: 150px;}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

How can I delete space over the second element? And how I can set grap to 5%? I try set grap to 0 and use left&right margins but i want space only between elements. — trip1e, Mar 06 '18 at 16:22
@trip1e I've updated my answer with an approach to simulating percentage based column gaps. — Joseph Marikle, Mar 06 '18 at 16:42
Thanks you, but how I can delete space over the first or second elemnt? — trip1e, Mar 08 '18 at 19:24
@trip1e I'm not sure what you mean. Can you clarify? What space are you referring to? — Joseph Marikle, Mar 09 '18 at 15:29
This space over the element :( I don't know how to fix it. https://imgur.com/DEIHUEt — trip1e, Mar 11 '18 at 12:00

How can I do two columns layout with flexbox and same spacing between items in column?

1 Answers1