Grid Frontstart

Make responsive layouts on the fly with Grid Frontstart. The best and most easy grid system you can find on the web.

Download Grid Frontstart

Latest version (stable)

Develop (experimental)

Compatibility

Compatibility Frontstart 1.0.0 or higher
Required Frontstart components None
Dependencies None

Basic usage

Default cell

Create cells based on a twelfth (1/12) layout. For example 1/5 does not fit in a twelfth layout, but 1/4 does. Every cell will stack from left to right continues on the next line if it does not fit on the current line.

Class Description
.grid Container
.cell-1-12 up to .cell-12-12 Width values based on one/twelfth. Other values like .cell-1-4 are also availible

<div class="grid">
    <div class="cell-1-2"></div>
    <div class="cell-1-2"></div>
    <div class="cell-1-4"></div>
    <div class="cell-3-4"></div>
</div>
                        
1/2
1/2
1/4
3/4

Responsive cell

Override the default cell property when your screen has a certain viewport width based on the global media queries.

Class Description
.cell-small-1-4 Responsive override
.cell-medium-2-4 Responsive override
.cell-large-3-4 Responsive override

<div class="grid">
    <div class="cell-1-2 cell-small-1-1"></div>
    <div class="cell-1-2 cell-small-1-1"></div>
    <div class="cell-1-4 cell-medium-1-3 cell-large-2-4"></div>
    <div class="cell-3-4 cell-medium-1-3 cell-large-2-4"></div>
</div>
                        
1/2 - small 1/1
1/2 - small 1/1
1/4 - medium 1/3 - large 2/4
3/4 - medium 1/3 - large 2/4

Offset

Class Description
.offset-1-12 up to .offset-12-12 Add offset to a cell
.offset-small-1-4 Responsive override
.offset-medium-2-4 Responsive override
.offset-large-3-4 Responsive override

<div class="grid">
    <div class="cell-1-2 cell-small-1-1"></div>
    <div class="cell-1-2 cell-small-1-1"></div>
    <div class="cell-1-4 cell-medium-1-3 cell-large-2-4"></div>
    <div class="cell-3-4 cell-medium-1-3 cell-large-2-4"></div>
</div>
                        
1/3 - small 1/1
1/3 - offset 1/4 - offset small 0

Advanced usage

Gutter

By default there is a gutter specified in the source files. You can override the gutter with the global offset values

Class Description
.grid-gutter-0 Remove gutter
.grid-gutter-1-4 Override the default gutter to "offset 1/4"
.grid-gutter-1-2 Override the default gutter to "offset 1/2"
.grid-gutter-1 Override the default gutter to "offset 1"
.grid-gutter-2 Override the default gutter to "offset 2"
.grid-gutter-3 Override the default gutter to "offset 3"
.grid-gutter-4 Override the default gutter to "offset 4"

<div class="grid grid-gutter-0">
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
</div>

<div class="grid grid-gutter-1-2">
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
</div>

<div class="grid grid-gutter-1">
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
</div>
                        
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4

Right to left

Reverse the cell direction. Offset and other properties will be respected.

Class Description
.grid-rtl Reverse cell direction

<div class="grid grid-rtl">
    <div class="cell-1-4"></div>
    <div class="cell-1-4 offset-1-4"></div>
</div>
                        
1/4
1/4 - offset 1/12

Break

Create a pattern to break cells to a new line.

Class Description
.grid-break-1 up to .grid-break-12 Pattern to break after every nth cell
.grid-break-small-2 Responsive override
.grid-break-medium-3 Responsive override
.grid-break-large-4 Responsive override

<div class="grid grid-break-3 grid-break-small-2">
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
    <div class="cell-1-4"></div>
</div>
                        
1/4
1/4
1/4
1/4