Grid System

by Chris Reilmann, February 7, 2014

The default grid system utilizes 12 columns, making for a 890px wide container. Below 800px viewport size, the columns become stacked vertically.


Two Columns with the same width

[col size=”6″]

In graphic design, a grid is a structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements in a rational, easy to absorb manner. A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.


[/col]

[col size=”6″]

In graphic design, a grid is a structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements in a rational, easy to absorb manner. A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.


[/col]

Three Columns with the same width

[col size=”4″]

In graphic design, a grid is a structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements in a rational, easy to absorb manner.


[/col]

[col size=”4″]

In graphic design, a grid is a structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements in a rational, easy to absorb manner.


[/col]

[col size=”4″]

In graphic design, a grid is a structure made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature on which a designer can organize graphic elements in a rational, easy to absorb manner.


[/col]

Four Columns with the same width

[col size=”3″]

A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.


[/col]

[col size=”3″]

A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.


[/col]

[col size=”3″]

A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.


[/col]

[col size=”3″]

A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.


[/col]

Three Columns Different Sizes (3 + 4 + 5)

[col size=”3″]

A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page.


[/col]

[col size=”4″]

A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.


[/col]

[col size=”5″]

A grid can be use to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape , or relation to other parts of the same graphic element or shape.


[/col]

Josef Müller-Brockmann

 

 

No Comments


    Leave a Reply

    Your email address will not be published Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

    *

    For image purchase or usage, please send a message through the contact page.