Your First Layout Guide
Vanduo's layout system is plain CSS — a 12-column responsive grid inside a container, with mobile-first breakpoints. It works the same in static HTML and Vue SFC templates.
A responsive 3-up grid
Columns stack on phones, go two-up on tablets, and three-up on desktops:
<div class="vd-container-responsive">
<div class="vd-row">
<div class="vd-col-12 vd-col-md-6 vd-col-lg-4">Column A</div>
<div class="vd-col-12 vd-col-md-6 vd-col-lg-4">Column B</div>
<div class="vd-col-12 vd-col-md-12 vd-col-lg-4">Column C</div>
</div>
</div>Breakpoints
| Name | Min width | Column class |
|---|---|---|
| (base) | < 576px | vd-col-12 — stacks on phones |
| sm | ≥ 576px | vd-col-sm-* |
| md | ≥ 768px | vd-col-md-* |
| lg | ≥ 992px | vd-col-lg-* |
| xl | ≥ 1200px | vd-col-xl-* |
| 2xl | ≥ 1400px | vd-col-2xl-* |
Containers
| Class | Behaviour |
|---|---|
.vd-container | Fixed max-width that steps down at each breakpoint |
.vd-container-responsive | Fluid width with responsive gutters (used across these docs) |
.vd-container-fluid | Full viewport width, edge to edge |
Mobile-first by default
Start with a base vd-col-12 (full width) and add larger breakpoints only where the layout should change. The grid gutters and column counts follow the same Fibonacci spacing as the rest of the system — see The Fibonacci scale.