columns
Base Grid
(default)
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t
w-20@t
w-20@t
w-20@t
w-20@t
w-1/6
w-1/6
w-1/6
w-1/6
w-1/6
w-1/6
w-1/3
w-2/3
w-1/4
w-1/4
w-1/4
w-1/4
w-1/2
w-1/2
w-3/4
w-1/4
w-auto (no specific width set; width defined by content)
w-fit

w-3/4@d

Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.

Cras mattis consectetur purus sit amet fermentum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

w-3/4@d, Sticky
Grid, No Gutters
(default)
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t w-10@d
w-20@t
w-20@t
w-20@t
w-20@t
w-20@t
w-1/6
w-1/6
w-1/6
w-1/6
w-1/6
w-1/6
w-1/3
w-2/3
w-1/4
w-1/4
w-1/4
w-1/4
w-1/2
w-1/2
w-3/4
w-1/4
Grid, Banners, Nesting, Fancy Options and Tweaks

Section (with bg-color option)

Nested Section (with bg-color option)

1/3
----
1/3
----
-------
-----
1/3
----
-------
1/3 (align-self-center)

Nested Section (with h-100 option)

1/4
----
1/4
----
-------
----
-------
1/4
----
-------
1/4
----
1/4 (h-100 on element sets height to match heighest element in a row)

Section (with bg-color option)

Nested Section (with bg-color option)

5/6@t
1/6@t