Skip to content
πŸ› A simple 12-column framework utalizing CSS grid
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Simple Columns

Simple Columns - 12-column layout framework

MIT License

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


Download simple.css

<link rel="stylesheet" type="text/css" href="css/simple.css" />



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


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

<div class='col-row'>
  <div class='col-9'>Nine columns</div>
  <div class='col-3'>Three columns</div>
  <div class='col-3'>Three columns</div>

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


Adapt column span:

<div class='col-row'>
  <div class='lg=col-6 md=col-4 sm=col-2'></div>
  <div class='lg=col-6 md=col-8 sm=col-10'></div>

Adapt placement:

<div class='col-row'>
  <div class='col-4 md=col-bottom sm=col-bottom'></div>
  <div class='col-4 md=col-center sm=col-bottom'></div>
  <div class='col-4 md=col-top    sm=col-top'></div>
You can’t perform that action at this time.