CODEWITHSUNDEEP
csslayout
The Gmo
The Gmo

Reputation: 274

CSS Layout suggestions needed

I'm having a few list of filters. My goal is to have them display as three rows next to each other (cb1&2 / cb3&4 / cb5).

The "checkbox_container"-blocks are created automatically through the CMS. Therefore I cannot add divs in between to create columns.

I could do it by absolute positioning, but would prefer not to in case the filters change in future which would cause layout issues.

Does anyone have a clever idea how to achieve this with CSS and/or JS?

That's the basic structure of the checkbox container output by the CMS.

<div class="checkboxes">
  <div class="checkbox_container cb01">
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb02">
    <div class="entry"></div>
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb03">
    <div class="entry"></div>
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb04">
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb05">
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
  </div>
</div>

Upvotes: 1

Views: 49

Answers (1)

Raevenk
Raevenk

Reputation: 246

Here you go jsfiddle.net/50t7oLga/1 , using flexbox with direction column and giving the wrapper a height to force items to wrap

Upvotes: 1

Related Questions