I am struggling to achieve the following layout as shown in the screenshot:
This is part of a filters section in a page, that opens up after clicking the button for that filter that triggers it.
The part that has bugged me, is the columns layout.
The current mark-up is like so:
<div class="dropdown-wrapper open">
<div class="dropdown-inner-wrap open">
<div class="bs-searchbox"></div>
<div class="inner open" role="listbox" style="max-height: 320px; overflow-y: auto;">
<ul id="klfilter_location" class="dropdown-menu inner">
<li class="dropdown-header optgroup optgroup-1">
<legend role="option" class="opt">
<label for="region-north">
<span class="text">
<span class="main-data-region">North</span>
</span>
<input type="checkbox" hidden="" class="hidden" id="region-north" value="north">
</label>
</legend>
<ul class="grouped-options group-1">
<li class="optgroup-north">
<a role="option" class="opt">
<label for="8">
<span class="check-mark"></span>
<span class="text">
<span class="main-data">Option A1
<span class="count">(1)</span>
</span>
</span>
<input type="checkbox" hidden="" class="hidden" id="8" name="Location[]" value="8">
</label>
</a>
</li>
<li class="optgroup-north">
<a role="option" class="opt">
<label for="9">
<span class="check-mark"></span>
<span class="text">
<span class="main-data">Option A2
<span class="count">(6)</span>
</span>
</span>
<input type="checkbox" class="hidden" id="9" name="Location[]" value="9">
</label>
</a>
</li>
</ul>
</li>
<li class="dropdown-header optgroup optgroup-2">
<legend role="option" class="opt">
<label for="region-west">
<span class="text">
<span class="main-data-region">West</span>
</span>
<input type="checkbox" class="hidden" id="region-west" value="west">
</label>
</legend>
<ul class="grouped-options group-2">
<li class="optgroup-west">
<a role="option" class="opt">
<label for="10">
<span class="check-mark"></span>
<span class="text">
<span class="main-data">Option B1
<span class="count">(1)</span>
</span>
</span>
<input type="checkbox" class="hidden" id="10" name="Location[]" value="10">
</label>
</a>
</li>
<li class="optgroup-west">
<a role="option" class="opt">
<label for="11">
<span class="check-mark"></span>
<span class="text">
<span class="main-data">Option B2
<span class="count">(6)</span>
</span>
</span>
<input type="checkbox" class="hidden" id="11" name="Location[]" value="11">
</label>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="grid-item klfilter-btn-toolbar">
<button>Clear</button>
<button>Go</button>
</div>
</div>
</div>
Notes:
The number of the "group uls" and their items is unspecified and changeable.
It's okay to display a vertical scrollbar inside the container - but horizontal scrollbar is undesirable.
Initially I tried with flexbox.
When set in flex-direction: row, if any group ul is too high, then there is a big empty vertical space among the other group.
If I use flex-direction: column , I need to specify some height for the flex container. But then I might end up with more columns, exceed the available width and have horizontal scroll.
I tried with CSS columns:
I tried many combinations and have various issues which is hard to remember and describe exactly right now. One big issue though, was that I couldn't "keep together" the group uls - or create an alignment at the top and have groups start from there.
Codepen CSS Columns *Which actually it looks ok now
I tried with float
Well, the problem is that with the uncertain height of each group, the floating elements can go/stuck anywhere and the whole layout will be messy.
I tried with css grid
I have far less experience with grid - so I am not sure if I tried everything that is possible, but still I just managed to create a 3x3 grid layout - and when one group ul is too high I got big space between the rows.
Any ideas - suggestions on how to achieve this?
Ideally, the elements should be able to be aligned like here (similar to the first image - but displays better a long left group):
