VelinStyle
Grid
VelinStyle's grid is built on native CSS Grid. Use .velin-grid with column helpers
to create complex, responsive layouts with minimal markup.
How It Works
Apply .velin-grid to a parent element. It sets display: grid and
a configurable gap. Then use .velin-cols-{n} to define how many columns the grid
should have, from 1 to 12.
<div class="velin-grid velin-cols-3">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>Column Counts
Use .velin-cols-1 through .velin-cols-12 to set the number of
equal-width grid columns.
<div class="velin-grid velin-cols-2">
<div>1</div>
<div>2</div>
</div>
<div class="velin-grid velin-cols-4">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="velin-grid velin-cols-6">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>Responsive Columns
Combine breakpoint infixes for responsive grids:
.velin-cols-1 .velin-cols-md-2 .velin-cols-lg-4.
<div class="velin-grid velin-cols-1 velin-cols-md-2 velin-cols-lg-4">
<div>Item A</div>
<div>Item B</div>
<div>Item C</div>
<div>Item D</div>
</div>Auto-fit & Auto-fill
For intrinsically responsive grids without breakpoints, use .velin-grid--auto-fit
or .velin-grid-auto-fill. These use repeat(auto-fit, minmax(...))
and repeat(auto-fill, minmax(...)) respectively.
<!-- Auto-fit: items stretch to fill available space -->
<div class="velin-grid velin-grid--auto-fit" style="--velin-grid-min: 200px">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
<div>Card 4</div>
<div>Card 5</div>
</div>
<!-- Auto-fill: empty tracks are preserved -->
<div class="velin-grid velin-grid-auto-fill" style="--velin-grid-min: 200px">
<div>Card 1</div>
<div>Card 2</div>
</div>auto-fit
auto-fill
Spanning Columns & Rows
Use .velin-col-span-{n} and .velin-row-span-{n} on grid children
to span multiple tracks.
<div class="velin-grid velin-cols-4">
<div class="velin-col-span-2">Spans 2 cols</div>
<div>Normal</div>
<div>Normal</div>
<div class="velin-col-span-3">Spans 3 cols</div>
<div>Normal</div>
</div>