How to Order My CSS Columns Horizontally Instead of Vertically

Can I order my CSS columns horizontally instead of vertically?

Is even easier:

.inner:nth-child(4n+1) {    clear: left;}
.inner {    float: left;    margin: 5px;}

<div class="column">    <div class="inner">1</div>    <div class="inner">2</div>    <div class="inner">3</div>    <div class="inner">4</div>    <div class="inner">5</div>    <div class="inner">6</div>    <div class="inner">7</div>    <div class="inner">8</div>    <div class="inner">9</div>    <div class="inner">10</div>    <div class="inner">11</div>    <div class="inner">12</div></div>

How do I make card-columns order horizontally?

As documented, the order of the CSS columns is top to bottom, then left to right so the order of the rendered columns will be..

1  3  5
2  4  6

There is no way to change the order of CSS columns. It's suggested you use another solution like Masonry. https://github.com/twbs/bootstrap/issues/17882

grid-template-columns CSS displaying vertically and not horizontally

I would really do that with display: flex ... why? because it is easier and not that complex to work with grid and give your flex-children a flex-basis of 30% to have three children in one row.
Nevertheless, you have div class="cards" openend twice. you will probably have this div only once and div class="card__*" several times.
grid is more compatible with older versions of browsers, like IE11, but also only with the prefix, but that's just my personal thought.

CSS Columns will not horizontally align

  #col{
     margin-top:0px;
  }
  #col h3{
      display:inline-block;
      vertical-align:top; // middle or bottom
  }

---

Related Topics