CODEWITHSUNDEEP
responsive-designzurb-foundation
Timo Wallenius
Timo Wallenius

Reputation: 456

Resizing amount of columns in a grid with Foundation

I've been playing around with Zurb Foundation to evaluate it's suitability for my next project. I stumbled upon a characteristic I'm not comfortable with when resizing the width of the browser so I'd like to confirm if there is any way to do it.

Say I have a grid with four images ('columns') per row. As I shrink the width of the browser window my natural expectation would be that the amount of images would shrink down to first three, then two and finally one image per row as the width reduces.

But instead what Foundation seems to do is shrink the divs as much as it can to keep the four columns per row and as it runs out of space to have four it jumps right down to one image per row directly.

This behavior to me is not logical so I assumed there must be a way to do it, but going through http://foundation.zurb.com/docs/grid.php I wasn't able to find a way to do it either with divs or block grids.

I sort of assumed this would be 101 functionality of responsive grids, but I don't have much experience on these css frameworks. So do I have to start writing my own media queries instead to achieve such gradual decrease with amount of columns per row?

Thanks!

Upvotes: 0

Views: 1676

Answers (2)

user2816809
user2816809

Reputation: 25

I was also having same problem and that's how I found this entry. I know this has been answered already and solved but I just wanna share my answer. Block Grid works for me. http://foundation.zurb.com/docs/components/block_grid.html See Advanced section

In my HTML, I just added the classes to specify how many items I want per row on different screen sizes, like this:

<ul class="row portfolio small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li>
        <img src="images/sample1.jpg" width="640" height="480">
    </li>
    <li>
      ...
    </li>
</ul>

Here, I want 1 item to be displayed in small device, 2 in medium, and 3 in large devices per row. I enabled the "foundation/components/block-grid" in _app.scss. And it worked! :)

Upvotes: 2

J.G.Sebring
J.G.Sebring

Reputation: 5964

Foundation does not force the content to be responsive or fluid, but the grid itself is. It's fluid down to a certain point where the 12 column grid collapses to the mobile grid. (assuming default grid setup)

However, you can get the behavior you are looking for by simply making your all images floating left inside a column.

Like:

img {float:left; width:24%;}

Then try adding min- and max-width to fit your needs.

img {float:left; width:24%; min-width:100px; max-width:300px;}

Upvotes: 0

Related Questions