WordPress Magazine Theme: Viewport
Tutorial: IPv6


Responsive Grid System is a fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

12 Column Grid
The 12 column grid is probably the most popular because it has fewer columns to keep track of. It is dividable by 2, 3, 4 and 6 which is usually suitable for just about any project.

16 Column Grid
The 16 column grid is only dividable by 2, 4 and 8 but has a column width that is small enough to be used for extra gutter space if needed.

24 Column Grid
The 24 column grid is the most flexible of the three because it is dividable by 2, 3, 4, 6, 8 and 12 making it the ultimate templating solution.

How It Works

Add this class to your page wrapper to center it to the browser window and set the width of the page.

Add this class to any element that spans the entire width of your container to clear any floating child elements. Also allows you to define spacing between rows.

Add this class to child elements of a row to float left and add the default gutter width. This class must be used in conjuction with one of the span classes below.

span_1, span_2, span_3, span_4, span_5, span_6, span_7, span_8, span_9, span_10, span_11, span_12
Add one of these classes to each col element to set it’s fluid width. On smaller screen sizes these elements will default to stack vertically.

clr, group
Add either of these two classes to an element, whichever one you're used to, to clear it’s floating child elements. Uses the 'clearfix method'.

Marking It Up

<div id="page_wrap" class="container row">
    <header class="row span_12">
        <hgroup class="row span_12">
            <h1 class="col span_4">Site Title</h1>
            <h2 class="col span_8">Site Description</h2>
        </hgroup><!-- span_12 -->
        <nav id="global_nav" class="row span_12">
            Insert global nav here.
        </nav><!-- span_12 -->
    </header><!-- span_12 -->
    <section id="content_wrap" class="row span_12">
        <article class="col span_8 clr">
            Insert page content here.
        </article><!-- span_8 -->
        <sidebar class="col span_4 clr">
            Insert sidebar stuff here.
        </sidebar><!-- span_4 -->
    </section><!-- content_wrap span_12 -->
    <footer class="row span_24">
        Insert footer stuff here.
    </footer><!-- span_24 -->
</div><!-- page_wrap -->


Tags: responsive, grid, web, html, css, stylesheet, webdevelopment, design, webdesign

Leave a Comment

No Comment

© Creative3x Ltd.