cssgrid examples
Grid Layouts using the new CSS Grid Feature.
Default 12 columns
Five break points
Each break point (xs, sm, md, lg, xl) starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
Three equal columns
Get three equal-width columns on desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
Three unequal columns
Get three columns starting at desktops and scaling to large desktops of various widths.
Two columns
Get two columns starting at desktops and scaling to large desktops.
Two columns with two nested columns
Mixed: mobile and desktop
Mixed: mobile, tablet, and desktop
Predefined Column Layouts
Two Columns .cg-cols-2
Default (50/50)
.cg-split-10-90
.cg-split-20-80
.cg-split-30-70
.cg-split-40-60
.cg-split-50-50
.cg-split-60-40
.cg-split-70-30
.cg-split-80-20
.cg-split-90-10
Responsive Two Columns .cg-cols-2
The predefined layouts are Desktop First. So the breakpoints go from LG to XS (instead of mobile first).
.cg-bk-lg
.cg-bk-md
.cg-bk-sm
.cg-bk-xs
Three Columns .cg-cols-3
Default (33/33/33)
.cg-split-10-80-10
.cg-split-15-70-15
.cg-split-20-60-20
.cg-split-25-50-25
.cg-split-25-25-50
.cg-split-50-25-25
Responsive Three Columns .cg-cols-3
The predefined layouts are Desktop First. So the breakpoints go from LG to XS (instead of mobile first).
.cg-bk-lg
.cg-bk-md
.cg-bk-sm
.cg-bk-xs
Predefined Application Layouts - .cg-app
Application Layouts consist of Header, Main Areas and Footer.
One Column Application - .cg-cols-1 .cg-app
Two Column Application - .cg-cols-2 .cg-app (Default 50/50)
Two Column Application- .cg-cols-2 .cg-app .cg-split-30-70
Any predefined 2 column layout can be used.
Responsive Two Column Application - .cg-cols-2 .cg-app
.cg-bk-lg
.cg-bk-md
.cg-bk-sm
.cg-bk-xs
Three Column Application - .cg-cols-3 .cg-app (default 33/33/33)
Three Column Application - .cg-cols-3 .cg-app .cg-split-25-50-25
Any predefined 3 column layout can be used.
Responsive Three Column Application - .cg-cols-3 .cg-app
.cg-bk-lg
.cg-bk-md
.cg-bk-sm
.cg-bk-xs
Border Layout
Border - .cg-cols-3 .cg-border (default 33/33/33)
Border - .cg-cols-3 .cg-border .cg-split-25-50-25
Any predefined 3 column layout can be used.