CSSColumnPro.css Grid Layout Examples

Download This Plugin Back To CSSScript.Com

A CSS grid layout system based on the 12-column grid design concept. It utilizes CSS3 flexbox to provide an alternative to Bootstrap's grid layout system.

Non-Defined Columns Demo

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col

Standard Grid Flow Demo

Max Desktop Col:.col-md-12

.col .col-4
.col .offset-4 .col-4
.col .col-4
.col .col-8
.col .col-4
.col .col-4
.col .col-4
.col .col-4
.col .col-4
.col .col-4
.col .col-2
.col .col-2 .offset-2
.col .col-2 .offset-2

Tablet Modified Flow Demo

Max Tablet Col:.col-md-6

.col .col-md-6 .col-4
.col .col-md-4 .offset-4 .col-4
.col .col-md-6 .col-4
.col .col-md-6 .col-8
.col .col-md-3 .col-4
.col .col-md-3 .col-4
.col .col-md-6 .col-4

Mobile Modified Flow Demo

Max Mobile Col:.col-sm-4

.col .col-sm-2 .col-4
.col .col-sm-2 offset-4 .col-4
.col .col-sm-2 .col-4
.col .col-sm-2 .col-8
.col .col-sm-1 .col-md-3 .col-3
.col .col-sm-1 .col-md-3 .col-3
.col .col-sm-1 .col-md-3 .col-3
.col .col-sm-1 .col-md-3 .col-3

Fluid Demo

Max Mobile Col:.col-sm-4

.col .col-sm-2 .col-4
.col .col-sm-2 .offset-4 .col-4