Grid System - Vanilla CSS Design System

Basic Grid

The basic grid system uses CSS Grid with a 12-column layout. Use grid-cols-* classes to define the number of columns.

Column 1

Column 2

Column 3

<div class="grid grid-cols-3 gap-3">
	<div>Column 1</div>
	<div>Column 2</div>
	<div>Column 3</div>
</div>

Column Spans

Use col-span-* classes to make elements span multiple columns.

col-span-4

col-span-2

col-span-3

<div class="grid grid-cols-6 gap-3">
	<div class="col-span-4">col-span-4</div>
	<div class="col-span-2">col-span-2</div>
	<div class="col-span-3">col-span-3</div>
	<div class="col-span-3">col-span-3</div>
</div>

Responsive Grid

Grids can adapt to different screen sizes using responsive prefixes (sm-, md-, lg-, xl-).

1 col mobile

2 cols tablet

4 cols desktop

Responsive

<div class="grid grid-cols-1 md-grid-cols-2 lg-grid-cols-4 gap-3">
	<div>1 col mobile</div>
	<div>2 cols tablet</div>
	<div>4 cols desktop</div>
	<div>Responsive</div>
</div>

Nested Grids

Grids can be nested inside grid columns for complex layouts.

Nested 1

Nested 2

Nested 3

Nested 4

<div class="grid grid-cols-2 gap-3">
	<div>
		<div class="grid grid-cols-2 gap-2">
			<div>Nested 1</div>
			<div>Nested 2</div>
		</div>
	</div>
	<div>
		<div class="grid grid-cols-2 gap-2">
			<div>Nested 3</div>
			<div>Nested 4</div>
		</div>
	</div>
</div>

Grid Gaps

Control the spacing between grid items using gap-* utilities.

gap-2

gap-4

<div class="grid grid-cols-3 gap-2">
	<div>gap-2</div>
	<div>gap-2</div>
	<div>gap-2</div>
</div>
<div class="grid grid-cols-3 gap-4">
	<div>gap-4</div>
	<div>gap-4</div>
	<div>gap-4</div>
</div>

Common Layout Patterns

Example of common layout patterns using the grid system.

Sidebar Layout

Sidebar

Main Content

Card Grid

Card 1

Card content

Card 2

Card content

Card 3

Card content

<!-- Sidebar Layout -->
<div class="grid grid-cols-12 gap-3">
	<div class="col-span-3">Sidebar</div>
	<div class="col-span-9">Main Content</div>
</div>
<!-- Card Grid -->
<div class="grid grid-cols-1 md-grid-cols-3 gap-3">
	<div class="card">...</div>
	<div class="card">...</div>
	<div class="card">...</div>
</div>

Grid System Reference

Available Classes

grid - Creates a grid container
grid-cols-{1-12} - Sets number of columns
col-span-{1-12} - Sets column span
gap-{1-3} - Sets grid gap
{sm|md|lg|xl}-grid-cols-{1-12} - Responsive columns
{sm|md|lg|xl}-col-span-{1-12} - Responsive spans