Simple Columns - 12-column layout framework
A simple 12-column framework utilizing CSS grid, built with a focus on keeping the syntax simple and readable.
- Simple syntax powered by responsive modifiers
- Pure CSS, no precompiling or other tools needed.
- Fully responsive
- Infinite nesting
Installation
Usage
Container
Class | Usage | Accepts modifiers |
---|---|---|
.col-row |
Container for your columns, handles the grid | No |
.col-fluid |
Used in addition to .col-row , this tells the row not to break at breakpoints |
No |
Columns
Class | Usage | Accepts modifiers |
---|---|---|
.col-{n} |
Spans your column across n number of columns. Max of 12 |
Yes |
.col-top |
Aligns the column to the top of the row | Yes |
.col-center |
Aligns the column to the center of the row | Yes |
.col-bottom |
Aligns the column to the bottom of the row | Yes |
.col-stretch |
Stretches a column vertically inside its row | Yes |
Column spans
Elements can span multiple columns using the .col-{n}
class
Nine columns Three columns Three columns
Responsive Modifiers
Column sizes and placement can update based on viewport size using size modifiers. The following modifiers can be appended to any .col-
class to change based on browser size.
Mobile | Tablet | Desktop | Desktop HD |
---|---|---|---|
xs= |
sm= |
md= |
lg= |
30em |
45em |
60em |
75em |
Examples
Adapt column span:
Adapt placement: