Menu icon Foundation
Multi-grid with Foundation

Hello world :)

Do you know how I can use the grid system responsive Foundation on a model responsive ?

I wish to generate four columns on smartphone, tablet 6 and 8 on desktop, it is possible with Foundation ?

Thank you all !

FoundationResponsivecssgrid

Hello world :)

Do you know how I can use the grid system responsive Foundation on a model responsive ?

I wish to generate four columns on smartphone, tablet 6 and 8 on desktop, it is possible with Foundation ?

Thank you all !

Karl Ward over 5 years ago

what happens to the 8 columns on desktop when it goes to tablet with 6 columns? You just want to HIDE 2 of the columns? You should probably be looking at the block-grid:
http://foundation.zurb.com/docs/components/block_grid.html

Stéphane Richin over 5 years ago

Hi Karl,

I think I found what I was looking for :

@media #{$small-up} {
    $total-columns: 4;
    @include grid-html-classes(smartphone);

}

@media #{$medium-up} {
    $total-columns: 6;
    @include grid-html-classes(tablet);

}

@media #{$large-up} {
    $total-columns: 8;
    @include grid-html-classes(desktop);

}

It generates me 4 columns on smartphone, tablet 6 and 8 on desktop :)

Karl Ward over 5 years ago

Even if that works, it is poor implementation and will break when you start using column classes ... The whole point of $total-columns, is to have a fixed amount of flexible columns that will break into multiple rows on different devices. For example in the default 12-column system, "large-6 medium-4 small-3" means the specific row will have 2 columns on large screen (6+6=12), 3 columns on medium tablets (4*3=12) and 4 columns on small devices (3*4=12).