Main Content
lg:col-start-5 lg:col-end-13 This layout demonstrates custom grid column positioning for a sidebar + content layout. On mobile, the sidebar is hidden and content uses the standard narrow width.
Grid
Layout structure and spacing
Content Width Classes
.grid-content-full Full viewport width (columns 1-14)
.grid-content-medium 10 centered columns (3-12)
.grid-content-narrow 8 centered columns (4-11) — Primary content width
Breakpoints
xs
480px
Extra small devices
sm
640px
Small devices
md
768px
Medium devices (tablets)
lg
1024px
Large devices (grid activates)
xl
1280px
Extra large devices
2xl
1536px
2X large devices
Grid Specifications
Mobile
< 768px
- Single column layout
- 1.25rem horizontal padding
- Content width classes ignored
Tablet
768px - 1023px
- Single column layout
- 2rem horizontal padding
- Content width classes ignored
Desktop
1024px+
- 14-column grid
- 1fr + 12×80px max + 1fr
- 1rem column gap