Sadrazam – Grid System Showcase

12-column responsive grid, auto-fit variants, nesting, offsets, and alignment

Breakpoint Reference

Responsive breakpoints used by the grid column classes

Prefix Min-width Target Devices
.col-xs-* 0 (no media query) All devices (base / small phones)
.col-sm-* 576px Mobile landscape
.col-md-* 768px Tablets (portrait)
.col-lg-* 992px Tablets (landscape) / Small laptops
.col-xl-* 1200px Desktop
.col-xxl-* 1440px Large desktop
.col-xxxl-* 1920px Full HD / 2K
.col-4k-* 2560px 4K displays

Grid container: .gr-row — 12-column CSS Grid with gap: 1.25rem

Equal Column Layouts

Common equal-width column distributions using .col-xs-*

12 Columns .col-xs-1
1
1
1
1
1
1
1
1
1
1
1
1
6 Columns .col-xs-2
2
2
2
2
2
2
4 Columns .col-xs-3
3
3
3
3
3 Columns .col-xs-4
4
4
4
2 Columns .col-xs-6
6
6
1 Column .col-xs-12
12

Mixed Column Widths

Asymmetric layouts where column spans add up to 12

8 + 4 .col-xs-8 + .col-xs-4
col-xs-8
col-xs-4
3 + 6 + 3 .col-xs-3 + .col-xs-6 + .col-xs-3
col-xs-3
col-xs-6
col-xs-3
2 + 3 + 7 .col-xs-2 + .col-xs-3 + .col-xs-7
col-xs-2
col-xs-3
col-xs-7
1 + 5 + 5 + 1 .col-xs-1 + .col-xs-5 + .col-xs-5 + .col-xs-1
1
col-xs-5
col-xs-5
1

Responsive Breakpoints

Columns change span at different viewport widths. Resize the browser to see the effect.

Responsive 4-up .col-xs-12 .col-sm-6 .col-md-4 .col-lg-3
Item 1
Item 2
Item 3
Item 4
Sidebar Layout .col-xs-12 .col-md-4/.col-md-8 then .col-lg-3/.col-lg-9
Sidebar
Main Content
Holy Grail .col-xs-12 .col-md-3/.col-md-6/.col-md-3
Left Nav
Content
Right Sidebar

Offsets with grid-column-start

Use inline grid-column-start to push columns. Since the grid is CSS Grid based, offsets are achieved via the start position.

Start at col 2 grid-column-start: 2
col-xs-4 (offset 1)
Start at col 4 grid-column-start: 4
col-xs-6 (offset 3)
Centered 6-col grid-column-start: 4 + .col-xs-6
Centered (6 of 12)
Right-aligned grid-column-start: 9 + .col-xs-4
Right-aligned (col 9-12)
Gapped pair .col-xs-3 at start 1, .col-xs-3 at start 10
Left
Right

Nested Grids

Place a .gr-row inside any column to create a nested 12-column sub-grid

Nested in col-8 .col-xs-8 > .gr-row > .col-xs-6 + .col-xs-6
col-xs-8 (parent)
col-xs-6
col-xs-6
col-xs-4
Nested 3-up .col-xs-6 > .gr-row > .col-xs-4 * 3
col-xs-6 (parent)
4
4
4
col-xs-6 (parent)
3
9

Alignment

Use align-items and justify-items on .gr-row for alignment control

Vertical Align align-items: start | center | end

align-items: start

Short
Tall
Medium

align-items: center

Short
Tall
Medium

align-items: end

Short
Tall
Medium

Auto-fit Grid Variants

Fluid grids that auto-wrap based on minimum column width. No explicit column count needed.

Auto SM .grid-auto-sm — minmax(150px, 1fr)
A
B
C
D
E
F
Auto Default .grid-auto — minmax(200px, 1fr)
A
B
C
D
E
F
Auto MD .grid-auto-md — minmax(250px, 1fr)
A
B
C
D
Auto LG .grid-auto-lg — minmax(300px, 1fr)
A
B
C
D
Auto XL .grid-auto-xl — minmax(400px, 1fr)
A
B
C

Real-World Layout Examples

Common page patterns composed with the grid system

Card Grid .col-xs-12 .col-sm-6 .col-lg-3
Product 1
Product 2
Product 3
Product 4
Dashboard .col-xs-12 .col-md-*
Main Chart (col-md-8)
Stats Panel (col-md-4)
Widget A (col-md-4)
Widget B (col-md-4)
Widget C (col-md-4)

Class Summary

Quick reference for all grid system classes

Class Description
.gr-row 12-column CSS Grid container with gap: 1.25rem
.col-xs-{1-12} Column span at all screen sizes (no media query)
.col-sm-{1-12} Column span at 576px and above
.col-md-{1-12} Column span at 768px and above
.col-lg-{1-12} Column span at 992px and above
.grid-auto Auto-fit grid with minmax(200px, 1fr)
.grid-auto-sm Auto-fit grid with minmax(150px, 1fr)
.grid-auto-md Auto-fit grid with minmax(250px, 1fr)
.grid-auto-lg Auto-fit grid with minmax(300px, 1fr)
.grid-auto-xl Auto-fit grid with minmax(400px, 1fr)