Layout - REDZ.UI

Grids

grid on the parent, cols-N for N equal columns, gap-* between them. A width prefix adds columns as the region grows: grid md:cols-2 is one column until the region is 768 px wide. Every example on these pages is a region of its own - resize the window and watch the examples, not the window.

One

Two

Three

Four

<div class="grid sm:cols-2 lg:cols-4 gap-16">
	<div class="card"><div class="card-body">One</div></div>
	<div class="card"><div class="card-body">Two</div></div>
	<div class="card"><div class="card-body">Three</div></div>
	<div class="card"><div class="card-body">Four</div></div>
</div>

Spans on a 12-column grid

A child's exception: span-N or span-full, with a prefix where it changes.

The main column - md:span-8

The side - md:span-4

<div class="grid md:cols-12 gap-16">
	<div class="card md:span-8"><div class="card-body">The main column - <code>md:span-8</code></div></div>
	<div class="card md:span-4"><div class="card-body">The side - <code>md:span-4</code></div></div>
</div>

As many as fit

cols-min-240: as many columns as fit, none narrower than 240 px.

lagoon.example

villas.lagoon.example

northbay.example

<div class="grid cols-min-160 gap-12">
	<div class="card"><div class="card-body">lagoon.example</div></div>
	<div class="card"><div class="card-body">villas.lagoon.example</div></div>
	<div class="card"><div class="card-body">northbay.example</div></div>
</div>

Stacks

vstack is a column of items, hstack a row of them centered on one line; gap-* spaces them and ms-auto pushes the rest to the end.

Draft Edited 2 hours ago

<div class="hstack gap-8">
	<span class="badge">Draft</span>
	<span class="text-muted">Edited 2 hours ago</span>
	<button class="btn btn-sm ms-auto" type="button">Preview</button>
	<button class="btn btn-sm btn-primary" type="button">Publish</button>
</div>

Regions and breakpoints

Regions are the shell's main and side columns, cards, dialogs, drawers, and any block with the class region. A page without the shell marks its own region; the root is never one.

Prefix	The region is at least
`sm:`	576 px
`md:`	768 px
`lg:`	1024 px
`xl:`	1280 px
`2xl:`	1536 px
`print:`	on paper

A region inside a flex row needs a width - flex-grow-1 or a grid track: its size cannot come from its content.
A card in the 8-of-12 column at 1440 px is about 740 px wide: sm: inside it, not md:.

From Bootstrap 5.3

Bootstrap 5.3	REDZ.UI	Change	Note
`col`	-	grid	equal columns come from the parent's cols-N; the child needs no class
`col-1`	`span-1`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-10`	`span-10`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-11`	`span-11`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-12`	`span-12`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-2`	`span-2`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-3`	`span-3`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-4`	`span-4`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-5`	`span-5`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-6`	`span-6`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-7`	`span-7`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-8`	`span-8`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-9`	`span-9`	grid	N of 12: the parent is grid cols-12 (or md:cols-12)
`col-auto`	-	review	a column as wide as its content: hstack, or grid-template-columns in the module's CSS
`container`	-	review	the shell's app-main, or a region with max-w-* and mx-auto
`container-fluid`	-	review	the shell's app-main, or a region with max-w-* and mx-auto
`g-0`	`gap-0`	grid	on the grid parent
`g-1`	`gap-4`	grid	on the grid parent
`g-2`	`gap-8`	grid	on the grid parent
`g-3`	`gap-16`	grid	on the grid parent
`g-4`	`gap-24`	grid	on the grid parent
`g-5`	`gap-48`	grid	on the grid parent
`gx-0`	`column-gap-0`	grid	on the grid parent
`gx-1`	`column-gap-4`	grid	on the grid parent
`gx-2`	`column-gap-8`	grid	on the grid parent
`gx-3`	`column-gap-16`	grid	on the grid parent
`gx-4`	`column-gap-24`	grid	on the grid parent
`gx-5`	`column-gap-48`	grid	on the grid parent
`gy-0`	`row-gap-0`	grid	on the grid parent
`gy-1`	`row-gap-4`	grid	on the grid parent
`gy-2`	`row-gap-8`	grid	on the grid parent
`gy-3`	`row-gap-16`	grid	on the grid parent
`gy-4`	`row-gap-24`	grid	on the grid parent
`gy-5`	`row-gap-48`	grid	on the grid parent
`offset-1`	-	review	no offsets: a span with an empty track before it
`offset-10`	-	review	no offsets: a span with an empty track before it
`offset-11`	-	review	no offsets: a span with an empty track before it
`offset-2`	-	review	no offsets: a span with an empty track before it
`offset-3`	-	review	no offsets: a span with an empty track before it
`offset-4`	-	review	no offsets: a span with an empty track before it
`offset-5`	-	review	no offsets: a span with an empty track before it
`offset-6`	-	review	no offsets: a span with an empty track before it
`offset-7`	-	review	no offsets: a span with an empty track before it
`offset-8`	-	review	no offsets: a span with an empty track before it
`offset-9`	-	review	no offsets: a span with an empty track before it
`row`	`grid`	grid	on the parent, with cols-N for equal columns or cols-12 for spans; no gutters to undo
`row-cols-1`	`cols-1`	grid	on the same parent
`row-cols-2`	`cols-2`	grid	on the same parent
`row-cols-3`	`cols-3`	grid	on the same parent
`row-cols-4`	`cols-4`	grid	on the same parent
`row-cols-5`	`cols-5`	grid	on the same parent
`row-cols-6`	`cols-6`	grid	on the same parent
`row-cols-auto`	-	review	items as wide as their content: hstack flex-wrap
`--bs-breakpoint-xs`	-	remove	REDZ.UI's widths are the region prefixes sm: to 2xl:
`--bs-gutter-x`	-	review	the grid's gap: gap-* on the grid
`--bs-gutter-y`	-	review	the grid's gap: gap-* on the grid