Grid System

12-column CSS Grid with responsive breakpoints (sm, md, lg, xl) and two container types.

Containers

Wrap your content in a container to control max-width.

`.n-container`

Fixed-width container that snaps to breakpoints.

<div class="n-container"> ...content... </div>

`.n-container-fluid`

Full-width container that stretches to fill the screen.

<div class="n-container-fluid"> ...full width content... </div>

Breakpoint Table

Breakpoint	Min Width	Container Max	Class Prefix
Default	0	100%	`.n-col-*`
Small	576px	540px	`.n-col-sm-*`
Medium	768px	720px	`.n-col-md-*`
Large	992px	960px	`.n-col-lg-*`
XL	1200px	1200px	`.n-col-xl-*`
XXL	1600px	1600px	—

Equal Columns

Divide the row into equal parts using consistent column spans.

4 × 3 (Quarter)

.n-col-3

3 × 4 (Thirds)

.n-col-4

2 × 6 (Halves)

.n-col-6

1 × 12 (Full Width)

.n-col-12

Mixed Widths

Columns don't need to be equal — mix and match as long as they add to 12.

.n-col-8

.n-col-4

.n-col-2

.n-col-7

.n-col-3

1

2

3

6

Responsive Columns

Stack columns on mobile, show side-by-side on larger screens. Resize your browser to see it!

12 → sm:6 → md:4 → lg:3

Item 1

Item 2

Item 3

Item 4

Sidebar Layout (collapses on mobile)

Sidebar (md:3)

Main Content (md:9)

<div class="n-row"> <div class="n-col-12 n-col-sm-6 n-col-md-4 n-col-lg-3"> Stacks mobile → 2-up sm → 3-up md → 4-up lg </div> </div>

Nested Grids

Place a new .n-row inside any column to create sub-grids.

Parent .n-col-6

Nested 6

Parent .n-col-6

Nested 4

Nested 8

All 12 Column Spans

Every possible column width at a glance.

1

2

3

4

5

6

7

8

9

10

11

12