-1

I have a layout using the CSS columns, and I would like it so the child items fill the respective column-count value.

In the code below I have 3 columns via the column-count: 3; property, but the layout never goes wider than 2 columns unless I remove the display: inline-block; on the child items (.column).

However if I remove this 'display: inline-block', it gives me three columns, but it breaks the columns themselves.

The same problem occurs if you comment out the 3rd column in the HTML, then you only have the 2 columns effectively stacking on top of each other instead of filling the width of the parent container?

Is there anyway to have it so the shows the correct number of columns, and as the window sizes reduces they always fill the entire width of the parent section element?

Codepen: https://codepen.io/thechewy/pen/xxdQyYE

body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

section {
  background: red;
  column-count: 3;
  column-gap: 2rem;
  column-width: 300px; /* sets the equivalent of min-width when combined with column count */
}

.column {
  display: inline-block;
  background-color: #eee;
  width: 100%;
  padding: 1rem;
  margin-bottom: 2rem;
}

.column-2 {
  background: yellow;
}

.column-3 {
  background: blue;
}

img {
  width: 100%;
  display:block;
}
<section>
  <div class="column column-1">
    <h2>Column 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio obcaecati, consectetur quos sed similique ipsum? Obcaecati modi totam, dolorem ratione optio distinctio omnis harum deserunt dignissimos consequatur, in eveniet sequi.</p>
    <img src="https://drive.google.com/uc?export=view&id=1rErAWAR319I1tfi_vMHKYgcvBY7vrfQp">
  </div>
  <div class="column column-2">
    <h2>Column 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio obcaecati, consectetur quos sed similique ipsum? Obcaecati modi totam, dolorem ratione optio distinctio omnis harum deserunt dignissimos consequatur, in eveniet sequi.</p>
  </div>
  <div class="column column-3">
    <h2>Column 3</h2>
  </div>
</section>
pjk_ok
  • 618
  • 7
  • 35
  • 90
  • Have you adjusted the box-sizing property? – Paulie_D Aug 09 '21 at 18:10
  • @Paulie_D - actually adding `* {box-sizing: border-box; position: relative}` makes the column gap property work. Thanks for that idea. Now I just need to work out the main problem. I'll remove that bit from the question. – pjk_ok Aug 09 '21 at 18:53
  • Use a standard div instead of section, set the column-count on this div, and don't use individual divs for each column. – Atrix Aug 10 '21 at 12:00
  • See also https://www.w3schools.com/css/css3_multiple_columns.asp – Atrix Aug 10 '21 at 12:01
  • @Atrix there's no point me trying that because a) there's no reason columns won't work on a `section` and b) if I remove the divs for each column the browser won't know that those wrappers are what are supposed to be the columns. It'll just do the math/layout on everything. – pjk_ok Aug 11 '21 at 00:38
  • Try adding a vertical-align: top; to the .column css, see https://stackoverflow.com/questions/17154707/using-display-inline-block-columns-move-down – Atrix Aug 12 '21 at 16:50
  • @Atrix it's not a vertical alignment issue. – pjk_ok Aug 12 '21 at 20:59

1 Answers1

-2

Try setting the column-gap in pixels.

Atrix
  • 299
  • 2
  • 6