Grid System - Domma Showcase

Basic Columns

Use .col-* classes to specify column widths (1-12)

.row > .col-4 + .col-4 + .col-4 (3 equal columns)

.col-4

.row > .col-6 + .col-6 (2 equal columns)

.col-6

.row > .col-3 + .col-9 (sidebar + content)

.col-3

.col-9

.row > .col-2 + .col-8 + .col-2

.col-2

.col-8

.col-2

Equal Width Columns

Use .col for auto-sizing equal-width columns

.row > .col + .col + .col (3 equal, auto-sized)

.col

.row > .col + .col + .col + .col + .col (5 equal)

.col

Auto Width Columns

Use .col-auto for content-based width

.row > .col-auto + .col + .col-auto

Auto (short)

.col (fills remaining)

Auto (longer content here)

Offsets

Use .offset-* to push columns to the right

.row > .col-4.offset-4 (centred column)

.col-4.offset-4

.row > .col-3.offset-3 + .col-3.offset-3

.col-3.offset-3

.row > .col-6.offset-6 (right-aligned)

.col-6.offset-6

Horizontal Alignment

Use .row.justify-* to align columns horizontally

.row.justify-start

.col-3

.row.justify-center

.col-3

.row.justify-end

.col-3

.row.justify-between

.col-3

.row.justify-around

.col-3

.row.justify-evenly

.col-3

Vertical Alignment

Use .row.align-* to align columns vertically

.row.align-start

Short

Tall

Normal

.row.align-center

Short

Tall

Normal

.row.align-end

Short

Tall

Normal

.row.align-stretch (default)

Stretches

Column Order

Use .order-* to reorder columns visually

Natural order: 1, 2, 3

1st in HTML

2nd in HTML

3rd in HTML

.order-last on 1st, .order-first on 3rd

1st (order-last)

2nd (no order)

3rd (order-first)

.order-3, .order-1, .order-2

1st (order-3)

2nd (order-1)

3rd (order-2)

No Gutters

Use .row.no-gutters to remove column padding

.row (with gutters - default)

.col-4

.row.no-gutters

.col-4

Gap Utilities

Use .row.gap-* for consistent spacing (uses CSS gap)

.row.gap-0

.col-3

.row.gap-2

.col-3

.row.gap-4

.col-3

Nested Grids

Place rows inside columns for complex layouts

Nested: .col-8 contains another .row

.col-4

.col-8 with nested row:

.col-6

Containers

Centred containers with max-width constraints

.container (max-width: 1200px)

.container

.container.container-xl (max-width: 1280px)

.container-xl

.container.container-lg (max-width: 1024px)

.container-lg

.container.container-md (max-width: 768px)

.container-md

.container.container-sm (max-width: 640px)

.container-sm

CSS Grid (Alternative)

Tailwind-style CSS Grid with .grid, .grid-cols-*, .col-span-*

.grid.grid-cols-3.gap-4

.grid.grid-cols-4 with .col-span-2

2 (col-span-2)

4 (col-span-3)

.grid.grid-cols-12 with various spans

Responsive Behaviour

Columns stack below 576px viewport width (mobile-first)

How it works:

< 576px: All .col-* columns stack vertically (width: 100%)
≥ 576px: Columns display at their specified widths

Try it: Resize your browser window to see the columns below stack on mobile.

.col-4