@vibe-labs/design-grids

CSS Grid utility classes for the Vibe Design System.

Usage

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

Contents

Base Utilities (grid.css)

Core grid display classes in @layer vibe.utilities:

.grid · .inline-grid

Generated Utilities (grid.g.css)

Utility classes generated into @layer vibe.utilities via the build script.

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