Basegrid 🛠

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+)

Features

• 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)

Examples

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>