@subcomponents/grid v3.2.2

Flexbox layout (12 fractions)

12/12
6/12
6/12
4/12
4/12
4/12
3/12
3/12
3/12
3/12

<div class="display-flex gap-1">
  <div class="width-6">...</div>
  <div class="width-6">...</div>
  ...
</div>

Flexible widths

Supports inline values: --min-width: <value>

.width-max
.width-min
.width-auto
.width-auto

Offset (1-11)

.display-flex

.offset-2

Justify (main axis)

.justify-start

1
2
3

.justify-center

1
2
3

.justify-end

1
2
3

.justify-between

1
2
3

.justify-around

1
2
3

.justify-evenly

1
2
3

Align (cross axis)

Container:

.align-stretch

1
2
3

.align-start

1
2
3

.align-center

1
2
3

.align-end

1
2
3

Flex items:

.align-self-stretch

1
2
3

.align-self-start

1
2
3

.align-self-center

1
2
3

.align-self-end

1
2
3

Order

.order-last

(1) .order-last
2
3

.order-first

1
2
(3) .order-first

Direction (Row)

.display-flex (default)

1
2
3

.display-flex.reverse

1
2
3

Direction (Column)

.column

1
2
3

.column.reverse

1
2
3

.column (variable height)

.width-min
.width-auto
.width-min

Gap

.display-flex.gap-n [0-5]

.width-auto
.width-auto
.width-auto

.display-flex[style="--gap: <length>"]

.width-auto
.width-auto
.width-auto

Breakpoints

Class Breakpoint
(none) 0 and up
xs 0 and up
sm 30em and up
md 42em and up
lg 57em and up

Containers

Class Width Max width
.container auto 1200px
.container-fluid 100% none