Grid

Famous UI's grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Check the examples below

Offet classes available { .offset-(1-12) }

Examples

Sample 12 Column Grid.

col-1
col-2
col-3
col-4
col-5
col-6
col-7
col-8
col-9
col-10
col-11
col-12

Grid Table

You can easily customize grid breakpoints inside src/vars/variable.scss

See how aspects of the Famous UI grid system work across multiple devices with a handy table.

Extra small
<590px
Small
≥590px
Medium
≥790px
Large
≥1160px
Extra large
≥1260px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 20px (10px on each side of a column)
Nestable Yes