I’m trying to achieve a calculator-like icon layout on a mobile navmenu.
The icons should display like on a mobile phone home screen, 3 columns and as many rows as needed for all the list items.
Now, if a list only has 2 items for example, that fill column 1 and 2, I want the next list to start in the empty column 3. If it has more than 1 item, it should go to the next row and fill up that row. Is there a way to achieve this with css only?
I’ve tried the attached flex and grid layouts, but get stuck because I can’t get the behaviour mentioned before. I also don’t wanna assign the columns and rows that items are on with template areas, because the items in the lists are dynamic and can vary from page to page.
Thanks in advance!
Edit: Restriction: I can’t edit the HTML and enclose all <li>
elements in one <ol>
My HTML:
<div class="entries">
<ol>
<li>1a</li>
<li>2a</li>
<li>3a</li>
</ol>
<ol>
<li>4b</li>
<li>5b</li>
</ol>
<ol>
<li>6c</li>
<li>7c</li>
</ol>
<ol>
<li>8d</li>
</ol>
<ol>
<li>9e</li>
<li>10e</li>
</ol>
</div>
My Grid CSS:
.entries {
display: grid;
grid-template-rows: 1fr;
width: 500px;
}
ol {
list-style: none;
margin: 0;
padding: 0;
gap: 20px;
margin: 10px 0;
display:grid;
grid-template-columns: repeat(3, 1fr);
}
4
Answers
why not change the structure of the HTML?
div > some spans
will make it easy to achieve your target by using CSS.You could remove all those
ol
and leave onle one wrapping all items, and it could be done easily.And with your same grid (or flex) CSS rules it’s done
It is possible by "opening" the
ol
by usingdisplay: contents
and then usingdisplay: grid
on the wrapping div container.You may change your CSS a little bit like:
Does this serve your purpose?