Can I order my CSS columns horizontally instead of vertically? Not using float or positioning

Question

Not Using position and float, if any others way please help me Here is Html Code

<div class="column-content">
  <div class="single-column" style="height: 220px"></div>
  <div class="single-column" style="height: 160px"></div>
  <div class="single-column" style="height: 250px"></div>
  <div class="single-column" style="height: 150px"></div>
  <div class="single-column" style="height: 180px"></div>
  <div class="single-column" style="height: 120px"></div>
  <div class="single-column" style="height: 140px"></div>
  <div class="single-column" style="height: 190px"></div>
</div>

Here is Css Code

.column-content{
  column-count: 3;
}
.single-column{
  background: purple;
  width: 100%;
  display: inline-block;
  margin-bottom: 20px;
}

See my [JSFiddle](https://jsfiddle.net/srme7w62/) but you need to use widths and inline-flex really — Can O' Spam, May 19 '22 at 10:09

score 1 · Answer 1 · answered May 19 '22 at 10:10

To expand on my comment;
You need to use inline-flex with combinations of widths to achieve your desired result;

.column-content {
  width: 100%;
  min-width: 100%;
}

.single-column {
  width:33%;
  min-width:33%;
  display: inline-flex;
  height: 100px;
  min-height: 100px;
  background-color: hotpink;
}

This can be tested in my JSFiddle although your heights throw it off

Can I order my CSS columns horizontally instead of vertically? Not using float or positioning

1 Answers1