Container and grid

Centered content and equal columns that wrap without media queries.

Container

.container centers its content with a max width that grows at each breakpoint. .container-fluid always spans the full width with side padding.

ViewportMax width
Below 640px100%
640px576px
768px700px
1024px950px
1280px1200px
1536px1450px
 
<main class="container">...</main>
<section class="container-fluid">...</section>

Grid

Children of .grid sit side by side in equal columns at least --i-grid-column-min-width (10rem) wide, and wrap onto new rows when the grid gets narrow. It adapts to its container as well as the screen.

One
Two
Three
Four

Full row

.span-full makes a child take a whole row.

Full row
One
Two
Three

Column width

Set --i-grid-column-min-width on the grid to change when columns wrap.

1
2
3
4
5
6

Variables

VariableDefault
--i-container-max-width100%, then 576px, 700px, 950px, 1200px and 1450px from viewports 640px, 768px, 1024px, 1280px and 1536px wide100%
--i-container-padding-inlinevar(--i-spacing)
--i-grid-column-gapvar(--i-spacing)
--i-grid-row-gapvar(--i-spacing)
--i-grid-column-min-widthNarrowest column. Columns wrap onto a new row below this width.10rem