Grid.Systema.tically—The Flexible & Simple CSS Grid System

Generate your grid

Why use Grid.Systema.tically?

Why use a grid system?

Using a grid system allows you to rapidly develop web layouts within the browser. Meaning you can focus more on your design work and less on your CSS code.

Why Grid.Systema.tically?

How to use Grid.Systema.tically

There are three elements within a HTML page using Grid.Systema.tically, all of which are defined by using the 'class' attribute.

class="grid container"

This is the container for the grid system. By default it is aligned to the left. All grid elements must be within this, however there is nothing to stop you from using more than one of these grid containers in your page.

class="grid col_x margin_yz"

This is the class attribute for each individual element within the grid system. There are three variables you will need to specify:


The number of columns the grid element spans.


The number of columns to the left of the element to be white space (essentially how many columns the left margin of the item should span). This value can be from 0 to (the number of columns in the system − 1). (see fig.1)


Either y or n (for yes or no, respectively). Should the margin include the gutter gap to the far left of the margin? You can use this to handle elements sitting on the left of a parent element to avoid double margins. (see fig.2)


This element acts as a clearing element. Because all content elements are floated, it is necessary to include this to make sure parent elements expand to fit their child elements vertically. (see fig.3)

Demonstration image of margin width
Fig.1: Demonstration of margin width.
Demonstration image of double margins caused by incorrect use of y or n modifier
Fig.2: Demonstration of double margins caused by incorrect use of y or n modifier.
Demonstration image of clearer item usage
Fig.3: Demonstration of clearer item.