Grid

12-column grid: .container centers, .row grids, .col-N spans, .offset-N shifts.

INSTALL

1pnpm dlx @sayagodev/mo add grid

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/grid.css";

EXAMPLES

Two columns

Half

1<div class="container">2  <div class="row">3    <div class="col-6">Half</div>4    <div class="col-6">Half</div>5  </div>6</div>7

Offset

Centered third

1<div class="container">2  <div class="row">3    <div class="col-4 offset-4">Centered third</div>4  </div>5</div>6

USAGE

1<div class="container">2  <div class="row">3    <div class="col-6">Half</div>4    <div class="col-6">Half</div>5  </div>6</div>

API

NAMEKINDDESCRIPTION

.containerclassCentered max-width wrapper

.rowclass12-column grid row

.col-NclassSpan N columns (1-12)

.offset-NclassShift right by N columns

--container-max / --grid-gaptokenWidth and gutter hooks

FILES

src/css/grid.css

Install:mo add grid

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--container-max--grid-gap

Preview

Half

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.