Grid System
A comprehensive 12-column flexbox grid with Fibonacci/Golden Ratio proportional layouts, responsive containers, order utilities, and an interactive toggle between standard and Fibonacci modes.
Standard vs Fibonacci — when to choose
Both share the same 12-column flexbox engine — reach for whichever fits the content. You can flip the live toggle in the demos below to feel the difference.
Standard 12-column
- Forms, dashboards, and data tables
- Equal or simple fractions (halves, thirds, quarters)
- Familiar, predictable responsive control
Golden / Fibonacci
- Editorial, hero, and marketing layouts
- Content + sidebar at a natural ≈1.618:1 split
- Galleries and asymmetric, organic emphasis
New to the proportion system? See Golden Ratio and Fibonacci vs Standard.
2XL Breakpoint (1400px)
The grid now supports all 6 breakpoints: base, sm (576px), md (768px), lg (992px), xl (1200px), and 2xl (1400px).
<!-- Responsive Grid with 6 Breakpoints -->
<div class="vd-row">
<div class="vd-col-12 vd-col-sm-6 vd-col-md-4 vd-col-lg-3 vd-col-xl-2 vd-col-2xl-1">
Column
</div>
</div>Responsive Containers
Responsive containers are fluid below their breakpoint and fixed-width above. They scale up at each subsequent breakpoint.
.vd-container-sm — fixed from 576px (540px, scales up).vd-container-md — fixed from 768px (720px, scales up).vd-container-lg — fixed from 992px (960px, scales up).vd-container-xl — fixed from 1200px (1140px, scales up).vd-container-2xl — fixed from 1400px (1320px)<!-- Responsive Containers -->
<div class="vd-container-sm">Fixed from 576px</div>
<div class="vd-container-md">Fixed from 768px</div>
<div class="vd-container-lg">Fixed from 992px</div>
<div class="vd-container-xl">Fixed from 1200px</div>
<div class="vd-container-2xl">Fixed from 1400px</div>Order Utilities
Reorder columns visually without changing HTML source order. Responsive variants available at all breakpoints.
.vd-order-3.vd-order-1.vd-order-2.vd-order-last.vd-order-firstFibonacci 4-Column (1:2:3:5)
Ratio 1:2:3:5 (total 11 parts). Use .vd-row-fib-4 with .vd-col-fib-1, .vd-col-fib-2, .vd-col-fib-3, .vd-col-fib-5.
Fibonacci 3-Column (3:5:8)
Ratio 3:5:8 (total 16 parts). Use .vd-row-fib-3-alt with .vd-col-fib-3, .vd-col-fib-5, .vd-col-fib-8.
CSS Grid: 4-Column Fibonacci
CSS Grid: 3:5:8 Fibonacci
Fibonacci Gap Utilities
Gap utilities using Fibonacci values. Works with CSS Grid and flex containers using the gap property.
.vd-gap-fib-3 (3px) .vd-gap-fib-8 (8px) .vd-gap-fib-21 (21px) Live Grid Toggle (useGrid)
useGrid(containerRef) manages one element: it flips the .vd-grid-standard / .vd-grid-fibonacci class, keeps data-layout-mode plus the region aria-label in sync, and dispatches a grid:modechange event. The real vd3 grid CSS then lays out each child .vd-row by its column count — golden ratio (2 cols), 2:3:5 (3 cols), or 1:2:3:5 (4 cols).
3-column row:
2-column row → golden ratio (1 : 1.618):
4-column row → 1 : 2 : 3 : 5:
<script setup lang="ts">
import { ref } from "vue";
import { useGrid } from "@vanduo-oss/vd3";
const container = ref<HTMLElement | null>(null);
const { mode, toggle, setMode } = useGrid(container);
</script>
<template>
<button :aria-pressed="mode === 'fibonacci'" @click="toggle">
{{ mode }} grid
</button>
<!-- Rows lay out by column count: 2 → 1:1.618, 3 → 2:3:5, 4 → 1:2:3:5 -->
<div ref="container">
<div class="vd-row">
<div class="vd-col-4">1</div>
<div class="vd-col-4">2</div>
<div class="vd-col-4">3</div>
</div>
</div>
</template>Document-Level Default (setGridSystem)
data-grid="fibonacci" on <html> and reflows every.vd-row on this page (including the docs sidebar layout) into Fibonacci proportions. It resets automatically when you navigate away. Call setGridSystem once at app bootstrap to make Fibonacci the default everywhere, mirroring how the theme layer stamps data-theme. Wrap any subtree that must stay 12-column in a .vd-grid-standard container — the closest explicit container wins.
import { onUnmounted } from "vue";
import { setGridSystem } from "@vanduo-oss/vd3";
// Bootstrap the whole app in Fibonacci mode — stamps data-grid="fibonacci"
// on <html>. Every .vd-row reflows unless it sits inside .vd-grid-standard.
setGridSystem("fibonacci");
// Back to the 12-column default (removes the attribute).
setGridSystem("standard");
// Not persisted — reset it if the choice is only page-scoped.
onUnmounted(() => setGridSystem("standard"));Offset Utilities
Complete offset utilities from 0-11 at all breakpoints. Use .vd-offset-0 to reset an offset at a specific breakpoint.