Grid System

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

[hr]

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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/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.

[hr]

[/col]

The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.

 

 

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google