Grid Layout System

The grid layout system is a responsive grid system that provides a consistent and predictable way to layout content on the page.

Canonical grid presets

Context	Container size	Columns	Gap	Intended use
Page content default	md	12	24px	Primary page layouts, dashboards
Card listings	md	3-4	24px	Applications, services, events
Dense listings	lg	4-6	24px	Admin tables, dense dashboards
Forms / settings	sm	1-2	16px	Forms, configuration pages
Marketing / wide	xl	4-6	32px	Marketing-style sections
Full-width sections	none	12	32px	Edge-to-edge content

Column behaviour rules

Rule	Description
Default column count	Must be selected from approved presets
Spanning	Items may span columns only in predefined patterns
Fractional columns	Custom fr math is discouraged
Nesting	Grids may be nested only when layout complexity requires it
Overflow	Grids must collapse to fewer columns on smaller screens

Responsive behaviour

Target device	Screen widths	Columns
Mobile	<639px	1
Tablet	640px-1366px	2
Standard desktop	1367px-1920px	3-4
Wide desktop	1921px+	4-6

Also check out the TailwindCSS responsive design.

Accessibility & readability rules

Rule	Description
Line length	Grid must not create overly long text columns
Card width	Cards must remain readable at all breakpoints
Focus order	Grid order must match DOM order
Density	Avoid exceeding 4 columns for content-heavy cards

Examples

4 column responsive layout

Device	Screen width	Container width	Breadpoint prefix	Columns
Small mobiles	<639px	auto	—	1
Large mobiles and less	640px-767px	40rem	sm	1
Small tablets	768px-1023px	48rem	md	2
Small desktops and large tablets	1024px-1280px	80rem	lg	3
Desktops	1281px-1440px	96rem	xl	4
Wide desktops	1536px+	96rem	2xl	4

<div class="container mx-auto px-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
    <div>
      <!-- Col 1 -->
    </div>

    <div>
      <!-- Col 2 -->
    </div>

    <div>
      <!-- Col 3 -->
    </div>

    <div>
      <!-- Col 4 -->
    </div>
  </div>
</div>