Columns & Layouts

Utilities for flex columns and common flex layouts.

Classes

Class Output
.d-fl-col1 > * { flex-basis: calc(100% - (var(--fl-gap) * 2)); }
.d-fl-col2 > * { flex-basis: calc(50% - (var(--fl-gap) * 2)); }
.d-fl-col3 > * { flex-basis: calc(33% - (var(--fl-gap) * 2)); }
.d-fl-col4 > * { flex-basis: calc(25% - (var(--fl-gap) * 2)); }
.d-fl-col5 > * { flex-basis: calc(20% - (var(--fl-gap) * 2)); }
.d-fl-col6 > * { flex-basis: calc(17% - (var(--fl-gap) * 2)); }
.d-fl-col7 > * { flex-basis: calc(14% - (var(--fl-gap) * 2)); }
.d-fl-col8 > * { flex-basis: calc(13% - (var(--fl-gap) * 2)); }
.d-fl-col9 > * { flex-basis: calc(11% - (var(--fl-gap) * 2)); }
.d-fl-col10 > * { flex-basis: calc(10% - (var(--fl-gap) * 2)); }
.d-fl-col11 > * { flex-basis: calc(9% - (var(--fl-gap) * 2)); }
.d-fl-col12 > * { flex-basis: calc(8% - (var(--fl-gap) * 2)); }
.d-flg0 > * { --fl-gap: 0 !important; }
.d-flg1 > * { --fl-gap: 0.1rem !important; }
.d-flg2 > * { --fl-gap: 0.2rem !important; }
.d-flg4 > * { --fl-gap: 0.4rem !important; }
.d-flg6 > * { --fl-gap: 0.6rem !important; }
.d-flg8 > * { --fl-gap: 0.8rem !important; }
.d-flg12 > * { --fl-gap: 1.2rem !important; }
.d-flg16 > * { --fl-gap: 1.6rem !important; }
.d-flg24 > * { --fl-gap: 2.4rem !important; }
.d-flg32 > * { --fl-gap: 3.2rem !important; }
.d-flg48 > * { --fl-gap: 4.8rem !important; }
.d-flg64 > * { --fl-gap: 6.4rem !important; }

Creating flex columns

Use d-fl-col{n} to create uniformly sized children within an element.

Flex Column Gaps

Use d-flg{n} to create uniform gaps between flex columns within an element.

Centering objects

By default flexed items align to flex-start both horizontally and vertically (effectively top, left). Use d-fl-center to center-center child items within an element.