The smallest and most flexible grid-system possible.
Requires CSS-grid and CSS-variables. (Firefox 31+, Chrome 49+, Safari 9.1+, Opera 36+, Edge 16+)
- Lightweight (0.6KB)
- No dependencies
- Flexible AF
- Dynamic grid attributes
- gw: Grid width (940px)
- gg: Grid gap (20px)
- gc: Grid columns (12)
- gr: Grid row height (auto)
- Dynamic section attributes
- w: Width (1)
- h: Height (1)
- x: Column position (auto)
- y: Row position (auto)
Include css either via CDN or install via NPM.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basegrid">Grid samples
// Simple grid
<div class="basegrid"></div>
// Fixed grid (equal width and height)
<div class="basegrid fixed"></div>
// Responsive grid
<div class="basegrid res"></div>Section samples (using fixed grid)
<!-- Fixed grid with: -->
<div class="basegrid fixed">
<div style="--w:5;">5 columns wide</div>
<div style="--w:5;--h:5;">And 5 high</div>
<div style="--w:5;--h:5;--x:3;--y:3;">With fixed position</div>
</div>
<!-- Variable height and commen width (masonry) -->
<div class="basegrid fixed" style="--w:4;">
<div style="--h:3;">3 high</div>
<div style="--h:2;">2 high</div>
<div style="--h:4;">4 high</div>
<div style="--h:3;">3 high</div>
<div style="--h:4;">4 high</div>
<div style="--h:2;">2 high</div>
</div>
<!-- Overlapping with fixed coordinates and size -->
<div class="basegrid fixed" style="--w:4;">
<div style="--x:1;--y:1;--w:8;--h:8"></div>
<div style="--x:3;--y:3;--w:8;--h:8"></div>
<div style="--x:5;--y:5;--w:8;--h:8"></div>
</div>