css column-count stays in a single row

Question

As i've read i cannot achieve this specific layout using css grid, i'm testing for the first time css column property. this is the layout i want to achieve using css column-count: https://jsfiddle.net/ghrv6ye4/3/

i've applied this very basic css rules to my project, and the result is this: https://prnt.sc/FsDl1VGdfqzR

the items are block elements and the container has a set width and height.

basically the property is ignored and every item stays in a single row instead of splitting into columns. the container is in position:absolute. if i remove it, the code works.

i've using this for the first time to any hint or help is greatly appreciated.

If container is `position: absolute` then make sure it's parent has `position: relative` and then add `width: 100%` to the container — Simp4Code, Jul 22 '22 at 09:52

score 0 · Answer 1 · answered Jul 22 '22 at 09:48

CSS Columns are quite useful! It's been around a while and is really easy to use, it has a weird flow though, where columns would typically go left to right then wrap if using flex or something, when using columns the wrap vertically -- which is sometimes exactly what you want!

body { font: 16px sans-serif; margin: 0 }
.container { margin: auto; max-width: 1200px }

:root { --colGap: 1rem }

.columns {
  border: 1px solid currentColor;
  border-radius: .5em;
  column-count: 3;
  column-gap: var(--colGap);
  padding: var(--colGap);
  padding-bottom: 0;
}
.columns .item {
  border: 1px solid currentColor;
  border-radius: .5em;
  margin-bottom: var(--colGap);
  padding: 2rem;
  text-align: center;
}

<div class="container">
  <div class="columns">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>

    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</div>

css column-count stays in a single row

1 Answers1