CODEWITHSUNDEEP
htmlcsscss-multicolumn-layout
BackSlash
BackSlash

Reputation: 22233

CSS columns: fill row first

I'm trying to do a pinterest-style layout with css3 columns.

This is my code so far:

.column-container {
  width: 100%;
  column-count: 4;
  column-gap: 5px;
  padding: 0;
  margin: 0;
}

.column-container > * {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}
<div class="column-container">
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x350">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x450">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x350">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x450">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
</div>

It works so far, but there is an issue when having few <figure> elements:

.column-container {
  width: 100%;
  column-count: 4;
  column-gap: 5px;
  padding: 0;
  margin: 0;
}

.column-container > * {
  width: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}
<div class="column-container">
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
</div>

As you can see, if you have two elements they get adjusted in the first column. This happens even with four elements: two go in the first column, two go in the second column.

Is there a way to have them adjusted one per column instead?

Upvotes: 2

Views: 2033

Answers (2)

Matt.S
Matt.S

Reputation: 287

You have to display them as block instead of inline-block in order to have them show up on top of each other. like this:

.column-container > * {
   width: 100%;
   display: block;
   margin: 0;
   padding: 0;
}

Upvotes: 1

Jamie Buttons Coulter
Jamie Buttons Coulter

Reputation: 513

You're displaying your figures as inline-block. Display them block instead

.column-container > * {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}


.column-container {
  width: 100%;
  column-count: 4;
  column-gap: 5px;
  padding: 0;
  margin: 0;
}

.column-container > * {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}
<div class="column-container">
   <figure>
      <img src="https://via.placeholder.com/500x150">
   </figure>
   <figure>
      <img src="https://via.placeholder.com/500x250">
   </figure>
</div>

Upvotes: 3

Related Questions