CSS make UL list wrap LI

css, html

Solution

To date, the only way you can do this with CSS alone is with media queries - one media query for each #columns layout necessary.

This can be quite tedious using css.

Fortunately, you can automate this using a preprocessor such as LESS.

So say that I have basic markup of `<li>`'s within an `<ul>`...

Here's how to take advantage of LESS to set up the media queries:

CODEPEN - Resize the window to see this in action

First set up some less variables according to the design which you need:

@item-width:100px;
@item-height:100px;
@marginV: 4px;
@marginH: 2px;
@min-cols:2;
@max-cols:9; //set an upper limit of how may columns you want to write the media queries for

Then:

Set up an iteration mixin like this: (You can paste this code into http://less2css.org)

.loopingClass (@index-width) when (@index-width <= @item-width * @max-cols) {
    @media (min-width:@index-width) {
        .container{
            width: @index-width;
        }
    }

    .loopingClass(@index-width + @item-width + 2*@marginH);
}

.loopingClass (@item-width * @min-cols + @min-cols*@marginH*2);

Problem

Original source

Related problems

• Left aligned last row in centered grid of elements