Axis Twelve - Complete Demo

1. 12-Column Grid Framework

Responsive grid layout using CSS Grid with 12 columns

Full Width Grid

col-12 (Full Width)

6-6 Split

col-6

4-4-4 Split

col-4

3-6-3 Split

col-3

col-6

col-3

Grid with Gaps

col-4 (gap-lg)

col-4

Grid with Offsets

col-6

offset-3 col-3

2. 12-Column Flexbox Framework

Responsive flexbox layout with alignment utilities

Basic Flex Row

Item 1

Item 2

Item 3

Flex with Justify Center

Center 1

Center 2

Center 3

Flex Column

Item 1

Item 2

Item 3

Flex with Space Between

Left

Right

<div class="flex justify-center gap-md"> <div>Item 1</div> <div>Item 2</div> </div> <div class="flex flex-column gap-lg"> <div>Item 1</div> <div>Item 2</div> </div> <div class="flex justify-between items-center"> <div>Left</div> <div>Right</div> </div>

3. Centering Utilities

Classes for centering items horizontally, vertically, or both

Row - Horizontal Centering

Centered Item

Row - Vertical Centering

Vertically Centered

Row - Both Directions

Centered Both Ways

Column - Centered Items

Centered Item 1

Centered Item 2

Box - Full Height Center

Centered in Box (300px height)

Both horizontally and vertically

General Centering Classes

.center - Flex center both ways

<div class="row center"> <div>Horizontally Centered</div> </div> <div class="row center-v"> <div>Vertically Centered</div> </div> <div class="row center-both"> <div>Centered Both Ways</div> </div> <div class="column center"> <div>Item 1</div> <div>Item 2</div> </div> <div class="box h-md"> <div>Centered Content</div> </div> <div class="center">Center everything</div>

Quick Reference

Grid Classes

.grid - Create grid container (12 columns)
.col-1 to .col-12 - Column span classes
.col-full - Full width column
.offset-0 to .offset-12 - Column offsets
.gap-sm, .gap-md, .gap-lg, .gap-xl - Gap sizes

Flexbox Classes

.flex - Create flex container
.flex-row, .flex-column - Direction
.justify-start, .justify-center, .justify-between, .justify-around, .justify-evenly - Justify content
.items-start, .items-center, .items-end - Align items
.gap-sm, .gap-md, .gap-lg, .gap-xl - Gap between items

Centering Classes

.row.center - Horizontally centered
.row.center-v - Vertically centered
.row.center-both - Both directions
.column.center - Center items horizontally in column
.column.center-v - Center items vertically in column
.box - Center content (both directions)
.box.h-sm, .box.h-md, .box.h-lg, .box.h-full - Box heights
.center - General flex center utility
.center-h - Horizontal center only
.center-v - Vertical center only

Axis Twelve - Complete Feature Demo

1. 12-Column Grid Framework

Full Width Grid

6-6 Split

4-4-4 Split

3-6-3 Split

Grid with Gaps

Grid with Offsets

2. 12-Column Flexbox Framework

Basic Flex Row

Flex with Justify Center

Flex Column

Flex with Space Between

3. Centering Utilities

Row - Horizontal Centering

Row - Vertical Centering

Row - Both Directions

Column - Centered Items

Box - Full Height Center

Centered in Box (300px height)

General Centering Classes

Quick Reference

Grid Classes

Flexbox Classes

Centering Classes