Grids
Using a grid provides the most control when creating a layout for a site. It's easy to understand where items are placed, how they get placed, and diagnosing grids is generally a trivial task.
Simplicity contains 12 grid classes to specify how many columns a grid should contain. The default .grid class is a 12 column grid. The other grid classes create grids with as many columns as their name, ie: .grid-4 creates a 4-column grid.
While .grid-12 is technically not-needed - it has the same layout as .grid - it is included for that level of specificity if you so choose to use it.
Grid Classes
.grid
.grid-2
.grid-3
.grid-4
.grid-5
.grid-6
.grid-7
.grid-8
.grid-9
.grid-10
.grid-11
.grid-12
In addition to the grid classes, Simplicity CSS offers 4 breakpoints for different screen sizes.
- Small: ≤ 575px
- Medium: 576px - 767px
- Large: 768px - 991px
- Desktop: ≥= 992px
Each screen size is targeted by classes that handle the starting column, ending column, column span, starting row, ending row, and row span for each size.
In addition to modifying the columns and rows, it's also possible to change an element into a grid element at different screen sizes.
Since my development takes places on a 1920x1080 screen, the base classes target screen sizes ≥ 992px.
All classes for row and column manipulation have 12 classes. Due to how the grids work, the column end classes have 2 additional classes (0 and 13) to provide complete support for layouts.
Screen Size
Modifies
First
Last
Small
Column Span
.col-span-sm-1
.col-span-sm-12
Small
Column Start
.col-start-sm-1
.col-start-sm-12
Small
Column End
.col-end-sm-0
.col-end-sm-13
Small
Row Span
.row-span-sm-1
.row-span-sm-12
Small
Row Start
.row-start-sm-1
.row-start-sm-12
Small
Row End
.row-end-sm-1
.row-end-sm-12
Small
Grid
.grid-sm
.grid-sm-11
Medium
Column Span
.col-span-md-1
.col-span-md-12
Medium
Column Start
.col-start-md-1
.col-start-md-12
Medium
Column End
.col-end-md-0
.col-end-md-13
Medium
Row Span
.row-span-md-1
.row-span-md-12
Medium
Row Start
.row-start-md-1
.row-start-md-12
Medium
Row End
.row-end-md-1
.row-end-md-12
Medium
Grid
.grid-md
.grid-md-11
Large
Column Span
.col-span-lg-1
.col-span-lg-12
Large
Column Start
.col-start-lg-1
.col-start-lg-12
Large
Column End
.col-end-lg-0
.col-end-lg-13
Large
Row Span
.row-span-lg-1
.row-span-lg-12
Large
Row Start
.row-start-lg-1
.row-start-lg-12
Large
Row End
.row-end-lg-1
.row-end-lg-12
Large
Grid
.grid-lg
.grid-lg-11
Desktop
Column Span
.col-span-1
.col-span-12
Desktop
Column Start
.col-start-1
.col-start-12
Desktop
Column End
.col-end-0
.col-end-13
Desktop
Row Span
.row-span-1
.row-span-12
Desktop
Row Start
.row-start-1
.row-start-12
Desktop
Row End
.row-end-1
.row-end-12
Simplicity also offers the .grid-center and .grid-center-verticalclass to center items inside of grids. Do note that this will take up all the rows/columns in that grid.
centered
If you wish to see a simple example of what is possible with grids, take a look below. If you resize your screen, you'll note that the elements shift around into patterns more reasonable for each device (desktop, tablet, etc).