CSS Columns with Left-Right Flow

CSS columns with left-right flow

The multi-column specification offers no property to change the distribution of elements among the columns: http://www.w3.org/TR/css3-multicol/. Such a property seems to go against what the module was designed for (recreating how newspaper or magazine articles are laid out).

None of the other pure CSS solutions will allow you to achieve the effect you are looking for.

CSS Columns, Top to Bottom then Left to Right

Adding column-fill: auto; to .css-col should give you what you are looking for, but you need to add a height to .css-col

Flow multi-column elements left-right before top-down

Like this?

<style>
  ul {list-style: none;}
  li {float: left;}
  li:nth-child(2n+1) {clear: left;} /* 1st of every twos */
</style>
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

how to fill the right column first and then the left in a 2-column layout

1) Set display:flex on the container

2) Set flex container's main-axis as the block-axis with flex-direction: column; (see flex-direction)

3) Switch wrap direction with flex-wrap: wrap-reverse; (see flex-wrap)

Note: This will only work correctly if the container has a fixed height. (thanks @Paulie_D)

Demo:

.wpr {  width: 30vw;  height: 30vw;  border: 1px solid;  display: flex;  flex-direction: column;  flex-wrap: wrap-reverse;  justify-content: space-between;}.wpr div {  width: 45%;  height: 45%;  border: 1px solid;  margin: 1% 1% 1% 6%;}.wpr div:nth-child(n+3) {  height: 30%;}

<div class="wpr">  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div></div>

How to flow multi-column elements from left to right before top-down in css?

Simple option would be to use flex with flex-wrap:

.list-tomorrow-page {  display:flex;   flex-wrap:wrap;}
.article-tomorrow-page {  width:50%;}

<ul class="list-tomorrow-page">   <li class="article-tomorrow-page">1</li>   <li class="article-tomorrow-page">2</li>   <li class="article-tomorrow-page">3</li>   <li class="article-tomorrow-page">4</li>   <li class="article-tomorrow-page">5</li>   <li class="article-tomorrow-page">6</li>   <li class="article-tomorrow-page">7</li></ul>

column-count property, don't wrap on containing element

Make .review li have display: inline-block to stop it being split over columns. – A Haworth 16 mins ago

Worked.

Getting CSS columns to bunch on the left instead of spreading out

It seems your items has fixed sizes so you can use CSS grid to fix this. The trick is to create as many columns with fixed width as possible and span all of them using grid-column: 1/-1

body {
  background-color: #c3dbff;
}


.wrapper {
  display:grid;
  grid-template-columns:repeat(auto-fit,250px); /* same as column width */
  gap:10px; /* same as column gap */
}

.cols {
  columns: 250px;
  column-gap: 10px;
  grid-column:1/-1; /* take all the columns of the grid*/
}

.thing {
  display: inline-block;
  width: 100%; /* use 100% and rely on the gap */
  background: red;
  margin-bottom: 10px;
  break-inside: avoid-column;
  color: white;
  display: inline-grid;
  place-content: center;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 50pt;
}

<div class="wrapper">
  <div class="cols">
    <div class="thing" style="height: 200px;">1</div>
    <div class="thing" style="height: 200px;">2</div>
    <div class="thing" style="height: 290px;">3</div>
    <div class="thing" style="height: 280px;">4</div>
    <div class="thing" style="height: 200px;">5</div>
    <div class="thing" style="height: 230px;">6</div>
    <div class="thing" style="height: 260px;">7</div>
    <div class="thing" style="height: 210px;">8</div>
    <div class="thing" style="height: 280px;">9</div>
    <div class="thing" style="height: 230px;">10</div>
    <div class="thing" style="height: 260px;">11</div>
    <div class="thing" style="height: 210px;">12</div>
    <div class="thing" style="height: 200px;">13</div>
    <div class="thing" style="height: 270px;">14</div>
    <div class="thing" style="height: 220px;">15</div>
    <div class="thing" style="height: 260px;">16</div>
    <div class="thing" style="height: 250px;">17</div>
    <div class="thing" style="height: 290px;">18</div>
  </div>
</div>

CSS Columns with Left-Right Flow