Grid
CSS 6-column grid layout.
Proportional column widths
1 of 1
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
1 of 4
2 of 4
3 of 4
4 of 4
1 of 5
2 of 5
3 of 5
4 of 5
5 of 5
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6
Mixed column widths
Span 1 of 3
Span 2 of 3
Span 1 of 4
Span 1 of 4
Span 2 of 4
Span 1 of 4
Span 3 of 4
Span 1 of 5
Span 4 of 5
Span 2 of 5
Span 3 of 5
Span 3 of 6
Span 3 of 6
Span 1 of 6
Span 2 of 6
Span 3 of 6
Span 2 of 6
Span 4 of 6
Span 1 of 6
Span 5 of 6
In the wild
I'm an H3
- I'm an UL
- My parent is a column
I'm a div
Unordered List
- Be a little creative with your lists
- No need to markup the li when columns count-# is on the ul element
- Works most of the time
Notes on usage
Wrappers
section- Outer wrapper
columns count-[1-6]- Inner wrapper, set proportional column widths using a count from 1 to 6.
columncolumn span-[1-6]- set column widths using a count from 1 to 6.
pad
Options
sortfindjump-tofilter
Styles
bordersborderfillmatch-heightgappadsmalllargelightdark
