CODEWITHSUNDEEP
htmlcssflexboxcss-multicolumn-layout
maxisme
maxisme

Reputation: 4245

Change the direction flow of CSS columns

So I have CSS like this:

#blogPosts{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%; 
}

and this creates 3 columns perfectly but when I gain another row the order seems to come out vertically like:

1,3,5
2,4,6

Instead of what I am wanting as:

1,2,3
4,5,6

Important!

Another important attribute I need, is that there must be a set margin between every post vertically. So for example if you look at the table above if 2 is longer than 1, the top of 4 will start y bellow 1 rather than: the height of 2 + y.

The HTML is like this:

<div id="blogPosts">
    <div class="blog">Content</div>
    <div class="blog">Content</div>
    ...
</div>

What can I do to fix this?

I am happy for any solutions, even one that includes javascript/jquery

This is the kind of thing I am after

enter image description here

Upvotes: 51

Views: 33416

Answers (5)

4seasons
4seasons

Reputation: 21

try this

#flex-container {
  border: 1px solid black;
  background-color: rgb(255, 230, 251);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 30px;
  }
#flex-container > div {
  border: 1px solid black;
  padding: 10px;
  background-color: lightgreen;
  }

https://www.w3schools.com/cssref/tryit.php?filename=trycss_column-gap_grid

Upvotes: 0

Miguel
Miguel

Reputation: 20633

The closest thing would be to use flexbox

#blogPosts {
   display: flex;
   align-items: left;
   justify-content: left;
   flex-direction: row;
   flex-wrap: wrap;
   flex-flow: row wrap;
   align-content: flex-end;
}

http://jsfiddle.net/o59gc4hw/2/

Upvotes: 12

Bass Jobsen
Bass Jobsen

Reputation: 49054

Well on the first sight I thought you should look at the Masonry library. When you then search for masonry, you possibly also will find masonry flexible box and masonry columns.

Problem with both the columns and flexible box solutions is that the first items are in the first column.

I found one possible solution, which only works when your number of item is fixed.

For nine items in three columns:

#blogPosts {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.blog {
  color: white;
  width: 33%;
}
.blog:nth-child(3n+1) {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.blog:nth-child(3n+2) {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.blog:nth-child(3n+3) {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.blog:nth-child(n+7):nth-child(-n+9) {
  page-break-after: always;
  -webkit-break-after: always;
     -moz-break-after: always;
          break-after: always;
}
<div id="blogPosts">
    <div class="blog" style="background-color:blue; height:50px;">1</div>
    <div class="blog" style="background-color:red; height:75px;">2</div>
    <div class="blog" style="background-color:green; height:100px;">3</div>
    <div class="blog" style="background-color:black; height:30px;">4</div>
    <div class="blog" style="background-color:yellow; height:50px;">5</div>
    <div class="blog" style="background-color:purple; height:80px;">6</div>
    <div class="blog" style="background-color:pink; height:150px;">7</div>
    <div class="blog" style="background-color:orange; height:15px;">8</div>
    <div class="blog" style="background-color:gold; height:50px;">9</div>
</div>

The above use the flexible box, with the order property and nth child selectors. And finally also see: How to specify an element after which to wrap in css flexbox?

Upvotes: 4

Prashanth Jagadeesh
Prashanth Jagadeesh

Reputation: 28

This can be implemented with simple css. HTML: 

<div id="blogPosts">
<div class="blog">1Content</div>
<div class="blog">1Content</div>
<div class="blog">2Content</div>
</div>

CSS: make the "blog" class as inline-block and float to left as show below.

.blog {
     display: inline-block;
     width: 33.3%;
     float: left;
     margin-bottom: -999em;
     padding-bottom: 999em; 
}

#blogPosts{
    overflow: hidden;
}

This is will fix the height issue that you had as well. :)

Upvotes: -3

Chacliff
Chacliff

Reputation: 71

I believe your misunderstanding how the column separation works with css colunms. Your blogPosts class is separating the content as evenly as possible across 3 colunms so it appears like:

1 3 5
2 4 6


but if you do 

<div class="blogPosts">
    Content 1
</div>
<br>
<div class="blogPosts">
    Content 2
</div>
<br>
<div class="blogPosts">
     Content 3
</div>

Then the conents would appear as:

1
2
3

but the content within these sections would fit to the 3 colunms.

Upvotes: -1

Related Questions