CODEWITHSUNDEEP
javascripthtmlcssgridresponsive-design
Yonder
Yonder

Reputation: 739

Responsive grid with variable column layout

Is there any way to adapt the number of columns depending on the screen width using a "traditional" grid layout?

I'm using one of the many responsive fluid grid systems out there - for example the grid from zurb foundation (using 12 columns).

Say I make three columns that span over the page:

<div class="row">
    <div class="four columns"></div>
    <div class="four columns"></div>
    <div class="four columns"></div>
</div>

Say that at a certain breakpoint (screen width) I would like to show my content in four columns instead of three.

<div class="row">
    <div class="three columns"></div>
    <div class="three columns"></div>
    <div class="three columns"></div>
    <div class="three columns"></div>
</div>

Maybe even more for even larger screen, and maybe only two columns for a little smaller.

The problem is - using this grid (or others with similar markup), that I have to change the markup - and to my knowledge, I cannot adapt the number of columns using css mediaqueries.

Is there any way to easily change the number of columns? Maybe using javascript?

I'm sure there must already be a grid system that is customizable in this way, but I haven't found any.

Upvotes: 2

Views: 2803

Answers (4)

val
val

Reputation: 793

http://gridsetapp.com would be exactly what you were looking for (I know it's two years ago but maybe someone else needs the same solution).

Upvotes: -1

skinneejoe
skinneejoe

Reputation: 3991

Try skeljs it is awesome. It will do exactly what you want.

Upvotes: 0

Chris Schmitz
Chris Schmitz

Reputation: 8247

Checkout the Block Grid in Foundation: http://foundation.zurb.com/docs/components/block_grid.html

Upvotes: 0

Jamie Hutber
Jamie Hutber

Reputation: 28064

You might want to have a look at the semantic grid. The reason being everything is defined inside of the css files, not the markup. It does use LESS so that might be a problem for you.

Also, you can make the grid on percentage, which will solve

Is there any way to adapt the number of columns depending on the screen width using a "traditional" grid layout?

Even though this isn't the approach you were asking to be fixed i believe it will fix the problem for you.

You also say how many columns you want to use.

Upvotes: 2

Related Questions