CODEWITHSUNDEEP
csscss-multicolumn-layout
Nikolnikov
Nikolnikov

Reputation: 21

CSS Columns that Overflow Below

In creating a multi-column, snaking layout, using CSS Columns, it seems content wants to naturally overflow to the right. I'm looking for a solution that will overflow below the fixed height of the parent container.

For example:

This is the natural flow when the content has reached the limit of the fixed height and overflows:

---------
|[1] [4]| [7]
|[2] [5]| [8]
|[3] [6]| [9]
---------

This is how I'd like for it to overflow:

---------
|[1] [4]|
|[2] [5]|
|[3] [6]|
---------
[7]
[8]
[9]

Example HTML

<div class="page">
    <div class="column">
      <div class="item">
        Test Item 1
      </div>
      <div class="item">
        Test Item 2
      </div>
      <div class="item">
        Test Item 3
      </div>
      <div class="item">
        Test Item 4
      </div>
      <div class="item">
        Test Item 5
      </div>
      <div class="item">
        Test Item 6
      </div>
      <div class="item">
        Test Item 7
      </div>
      <div class="item">
        Test Item 8
      </div>
      <div class="item">
        Test Item 9
      </div>
      <div class="item">
        Test Item 10
      </div>
      <div class="item">
        Test Item 11
      </div>
      <div class="item">
        Test Item 12
      </div>
      <div class="item">
        Test Item 13
      </div>
      <div class="item">
        Test Item 14
      </div>
      <div class="item">
        Test Item 15
      </div>
      <div class="item">
        Test Item 16
      </div>
      <div class="item">
        Test Item 17
      </div>
      <div class="item">
        Test Item 18
      </div>
      <div class="item">
        Test Item 19
      </div>
      <div class="item">
        Test Item 20
      </div>
      <div class="item">
        Test Item 21
      </div>
    </div>
</div>

Example CSS

.page {
  width: 400px;
  height: 300px;
  background: #ddd;
}

.column {
  column-count: 2;
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.item {
  padding: 8px 10px;
  break-inside: avoid;
  break-before: always;
}

Here's a Codepen example: https://codepen.io/Nikolnikov/pen/yLJLpQp

Any suggestions? Is it even doable?

Upvotes: 2

Views: 412

Answers (1)

ushka1
ushka1

Reputation: 895

You can achieve this result with flexbox and flex-wrap property. I think this example will help.

.container {
  display: flex;
  flex-wrap: wrap;
}

.column > div {
  margin: 5px;
  width: 100px;
  height: 100px;
  background-color: lightskyblue;
}
<div class="container">
  <div class="column">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="column">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="column">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Upvotes: 1

Related Questions