Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Layout
  3. Gutters

Gutters

Gutters are the spacing between columns in VelinStyle's row and grid systems. Control them with .velin-g-*, .velin-gx-*, and .velin-gy-* classes.

How It Works

Gutter classes set the --velin-gutter-x and --velin-gutter-y CSS custom properties on .velin-row. The scale follows the spacing system (0 through 5, where 0 = 0, 1 = 0.25rem, 2 = 0.5rem, 3 = 1rem, 4 = 1.5rem, 5 = 3rem). 

Class              Axis        Value
─────────────────────────────────────
.velin-g-0         both        0
.velin-g-1         both        0.25rem
.velin-g-2         both        0.5rem
.velin-g-3         both        1rem
.velin-g-4         both        1.5rem
.velin-g-5         both        3rem
.velin-gx-*        horizontal  (same scale)
.velin-gy-*        vertical    (same scale)

Horizontal Gutters

.velin-gx-* controls the horizontal (left/right) spacing between columns. 

<div class="velin-row velin-gx-5">
  <div class="velin-col-6">
    <div class="velin-p-3 velin-bg-light">Wide horizontal gutter</div>
  </div>
  <div class="velin-col-6">
    <div class="velin-p-3 velin-bg-light">Wide horizontal gutter</div>
  </div>
</div>
Wide horizontal gutter
Wide horizontal gutter

Vertical Gutters

.velin-gy-* controls the vertical (top/bottom) spacing when columns wrap. 

<div class="velin-row velin-gy-4">
  <div class="velin-col-6"><div class="velin-p-3 velin-bg-light">A</div></div>
  <div class="velin-col-6"><div class="velin-p-3 velin-bg-light">B</div></div>
  <div class="velin-col-6"><div class="velin-p-3 velin-bg-light">C</div></div>
  <div class="velin-col-6"><div class="velin-p-3 velin-bg-light">D</div></div>
</div>
A
B
C
D

Combined Gutters

.velin-g-* sets both horizontal and vertical gutters at once. 

<div class="velin-row velin-g-3">
  <div class="velin-col-4"><div class="velin-p-3 velin-bg-primary velin-text-white">1</div></div>
  <div class="velin-col-4"><div class="velin-p-3 velin-bg-primary velin-text-white">2</div></div>
  <div class="velin-col-4"><div class="velin-p-3 velin-bg-primary velin-text-white">3</div></div>
  <div class="velin-col-4"><div class="velin-p-3 velin-bg-primary velin-text-white">4</div></div>
  <div class="velin-col-4"><div class="velin-p-3 velin-bg-primary velin-text-white">5</div></div>
  <div class="velin-col-4"><div class="velin-p-3 velin-bg-primary velin-text-white">6</div></div>
</div>
1
2
3
4
5
6

No Gutters

Remove gutters entirely with .velin-g-0. 

<div class="velin-row velin-g-0">
  <div class="velin-col-6"><div class="velin-p-3 velin-bg-light">No gap</div></div>
  <div class="velin-col-6"><div class="velin-p-3 velin-bg-light">No gap</div></div>
</div>
No gap
No gap

Custom Gutter Values

Override the gutter CSS custom properties directly for arbitrary values. 

.my-custom-row {
  --velin-gutter-x: 2.5rem;
  --velin-gutter-y: 1.25rem;
}

Theme wählen