Fixed width items in a responsive grid?

Question

I have fixed width elements that I'd like to make a grid of. The only issue is that I want it to be responsive. Basically have as many items as it can have in one row, and then move the item to the second row as the space gets smaller.

I'm using frameworks like jeet.gs and it provides this very useful function called "cycle" which you can use to specify the amount of items you want in a row and it'll automatically create a grid for you. The only issue is that to make this responsive, meaning going from 4 items to 3 items in a row I need to do calculations like below(itemWidth*4) then do uncycle: 4 and cycle: 3.

Which kind of sucks any general solution for this sort of problem?

score 1 · Accepted Answer · answered Feb 26 '15 at 22:08

I do not think that there is a more general solution with jeet-grid. Using cycle and uncycle is certainly the intended way to do it, though you might want to consider using media queries instead of calculating the item width (see this video using stylus).

Another possibility would be to simply use flexbox instead (see this guide), just be aware of limited browser support.

So for example:

#wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    width: 150px;
    height: 150px;
    background-color: green;
    margin: 10px;
}

<div id="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

There are also grid systems based on flexbox... for example flexboxgrid.com.

Fixed width items in a responsive grid?

1 Answers1