Is there any full width supporting CSS Grid System? [closed]

Question

Is there any CSS grid system that supports full viewport width? Most Grid System seem to just intend a width of 960px up to 1140px. This is the most deployed width for a normal User(as the most people are using 1280px × 1024px).

My purpose is to have a responsive layout for Users using even a FULL HD Resolution(1920px × 1080px).

If there is a better/more simple way to make it, pls let me know

Expose

This post might help(similar question) stackoverflow.com/questions/159025/jquery-grid-recommendations – Cordle

Or might not... I was looking for a CSS based solution. Anyway, thanks! – Expose

Answer 1

Twitter bootstrap fluid grid system works with percentages : http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

There is also a lot of pure css responsive grid system, for exemple : Skeleton

This article covers a lot of them : http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

It's possible to do that yourself, using percentages for css width, media queries and js fallbacks (as media queries aren't fully supported).

But those grid systems will save you times and headaches as they are for the most well tested.

To help your decision, you should consider :

• The browser support you need and those provided by the grid system.
• The size (they are lightweight for most, but some are not only grid systems, ie Twitter bootstrap).
• Naming conventions, your are gonna use weird css class (for exemple span4), chose the one you prefer, some of them are more semantic than others, it's up to you.
• And at least, the open sources factors : community, support, updates frequencies...

Also, this site is a most for responsive inspirations : http://mediaqueri.es/

Grown

I'm personally in love with twitter bootstrap, which handles a lot of UI things, very clean, very well documented, lightweight and keep getting better... I'm also using Skeleton for other projects when I don't need too much UI things. I think you can pick anyone of them and can't be wrong, they all do the same thing, just take care about the four points above. – Grown

Answer 2

I've been working on a fluid grid system called Fluidable. You can set the max-width to anything you like. In your case, you can simply set it to 100% and the grid will use up all the space. You can also configure any number of columns you like to use.

https://github.com/andri/Fluidable

Fryd

Looks nice! Didn't work with less before, but seems easy implementable – Expose

Answer 3

For small projects, I would recommend Amazium. It provides 12 columns, nesting, offsetting and basic media queries. In order to get a full screen grid, your markup should look like:

<div class="row-max">
    <div class="grid_12">
        ...
        <div class="row-max">
            <div class="grid_6">...</div>
            <div class="grid_6">...</div>
        </div>
    </div>
</div>

Resource

Answer 4

You may try ARC grid, a simple grid system I wrote, it supports full width by default.

Usage syntax:

<div class="grid">
    <div class="row">
        <div class="col s6 m4"></div>
        <div class="col s6 m4"></div>
        <div class="col m4"></div>
    </div>
</div>

More examples and demo here

Selfregulating