Grid 1.2.0

Native CSS Grid helpers (.velin-grid + modifiers) and an optional flex row system (.velin-row / .velin-col-*) in src/layout/grid.css.
Read this page in English

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Use .velin-grid with .velin-grid--cols-* for equal CSS Grid tracks.
Use .velin-grid--auto-fit / auto-fill for fluid card grids.
Use .velin-row + percentage columns when you need a Bootstrap-like flex grid.

When not

Do not invent .velin-cols-* — the real modifiers are .velin-grid--cols-*.
Prefer layout patterns for full page shells.

How it works

<div class="velin-grid velin-grid--cols-3 velin-grid--gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Column counts

.velin-grid--cols-1, 2, 3, 4, 6, 12.

Responsive columns

Examples: .velin-grid--md-cols-2, .velin-grid--lg-cols-4 (container + viewport variants in source).

<div class="velin-grid velin-grid--cols-1 velin-grid--md-cols-2 velin-grid--lg-cols-4">…</div>

Auto-fit & auto-fill

<div class="velin-grid velin-grid--auto-fit velin-grid--gap-4">…</div>

Spanning

Inside CSS Grid, .velin-col-1 … .velin-col-12 set grid-column: span N. Inside .velin-row, the same classes set flex basis percentages.