CSS - Is it possible to use column-count and "force" the 2nd column to have more items than the frst one(s)?

user_1579338 0
Viewed 584

Like in this example below, is it possible to make the second column have more items than the first one?

enter image description here

multiple-columns css
2 Answers

Yes it is possible.

It is a work-around though. If you are breaking text into a no of columns, you can simple use <br> tag in the first column to push more content into the second column.

If you are using a no of images in a list as an example, lets say 5, by default the first column will house 3 and the second column will house 2. But you can change that by adding gap between the 2nd and 3rd item using margin.

These methods though working, are not a good practice.

Hope you found this helpful!

user_120012900

Well here's how I would do it.

After all the other styles, I used the direction property to specify how the box uses up it's space. The default value is ltr (left-to-right), but setting it to rtl (right to left) forces the box to fill up the right side of the element firstly.

It you're planning on using text in containers like that, you should use the text-align: left declaration to force the text to align to the left.

.container {
  display: flex;
  align-items: center;
  flex-flow: column wrap;
  height: 100px;
  padding: 20px;
  column-count: 2;
  direction: rtl;
  margin-bottom: 1rem;
}

.container.text {
  text-align: left;
}

.bar {
  display: inline-block;
  width: 6rem;
  height: 10px;
  margin: .25rem 0;
  border-radius: 5rem;
  background-color: black;
}
<div class="container">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

<div class="container text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus. Faucibus interdum posuere lorem ipsum dolor. Nam aliquam sem et tortor consequat id porta
  nibh venenatis. Enim ut sem viverra aliquet eget sit amet.
</div>

user_153501390
Related