@vibe-labs/design-grids

CSS Grid utility classes for the Vibe Design System — display, columns, spans, placement, and auto flow.

Installation

@import "@vibe-labs/design-grids";

Tokens

None — this package provides utility classes only.

Utilities / Generated Classes

Base Utilities (grid.css)

Core grid display classes in @layer vibe.utilities:

.grid · .inline-grid

Generated Utilities (grid.g.css)

All classes in @layer vibe.utilities.

Columns

• .grid-cols-{n} — template columns, 1–12
• .col-span-{n} — column span, 1–12
• .col-start-{n} / .col-end-{n} — explicit column placement, 1–12

Rows

• .row-span-{n} — row span, 1–4

Auto Flow

.grid-flow-row · .grid-flow-col · .grid-flow-dense

Dist Structure

File	Description
index.css	Barrel — imports both files below
grid.css	Base grid display classes
grid.g.css	Generated utility classes

Dependencies

None — this package is self-contained.

Build

npm run build

---

Usage Guide

Provides CSS Grid utility classes for two-dimensional layouts in the Vibe Design System.

Import

@import "@vibe-labs/design-grids";

Common Patterns

1. Three-column card grid

<div class="grid grid-cols-3 gap-6">
  <div class="bg-elevated rounded-lg p-4">Card 1</div>
  <div class="bg-elevated rounded-lg p-4">Card 2</div>
  <div class="bg-elevated rounded-lg p-4">Card 3</div>
</div>

2. Full-width feature spanning all columns

<div class="grid grid-cols-3 gap-6">
  <div class="col-span-3 bg-gradient-accent rounded-xl p-8">Hero Banner</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

3. Two-thirds / one-third layout

<div class="grid grid-cols-3 gap-8">
  <main class="col-span-2">Main content</main>
  <aside>Sidebar</aside>
</div>

4. Dashboard with explicit item placement

<div class="grid grid-cols-12 gap-4">
  <div class="col-start-1 col-end-9">Chart (8 cols)</div>
  <div class="col-start-9 col-end-13">Stats (4 cols)</div>
  <div class="col-span-4">KPI 1</div>
  <div class="col-span-4">KPI 2</div>
  <div class="col-span-4">KPI 3</div>
</div>

5. Auto-flowing dense gallery

<div class="grid grid-cols-4 gap-2 grid-flow-dense">
  <img class="col-span-2 row-span-2" src="large.jpg" alt="" />
  <img src="sm1.jpg" alt="" />
  <img src="sm2.jpg" alt="" />
  <img src="sm3.jpg" alt="" />
</div>

6. Responsive grid using design-responsive companion

<!-- Requires @vibe-labs/design-responsive for breakpoint variants -->
<div class="container-inline">
  <div class="grid grid-cols-1 grid-cols-2-md grid-cols-4-xl gap-4">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </div>
</div>

Token Reference

This package has no tokens. Key classes:

Class	Effect
.grid-cols-{n}	n-column equal template (1–12)
.col-span-{n}	Span n columns (1–12)
.col-start-{n}	Start at column line n
.row-span-{n}	Span n rows (1–4)
.grid-flow-dense	Fill gaps with auto-placed items