Columns

The flexbox-based column system uses .velin-row and .velin-col-* classes for traditional 12-column layouts with responsive breakpoint support.

How It Works

Wrap columns in a .velin-row (a flex container with negative margins to offset gutter padding). Each .velin-col-{n} occupies n/12 of the row width.

<div class="velin-row">
  <div class="velin-col-4">4 of 12</div>
  <div class="velin-col-4">4 of 12</div>
  <div class="velin-col-4">4 of 12</div>
</div>

4 of 12

Equal-width Columns

Use .velin-col (without a number) for equal-width columns that automatically share available space.

<div class="velin-row">
  <div class="velin-col">Equal</div>
  <div class="velin-col">Equal</div>
  <div class="velin-col">Equal</div>
</div>

Equal

Responsive Columns

Add a breakpoint infix to change column widths at different screen sizes: .velin-col-{bp}-{n}.

<div class="velin-row">
  <div class="velin-col-12 velin-col-md-8">Main content</div>
  <div class="velin-col-12 velin-col-md-4">Sidebar</div>
</div>

<div class="velin-row">
  <div class="velin-col-6 velin-col-lg-3">A</div>
  <div class="velin-col-6 velin-col-lg-3">B</div>
  <div class="velin-col-6 velin-col-lg-3">C</div>
  <div class="velin-col-6 velin-col-lg-3">D</div>
</div>

Main content (col-12 / col-md-8)

Sidebar (col-12 / col-md-4)

Auto Columns

.velin-col-auto sizes a column based on its content width, while siblings share the remaining space.

<div class="velin-row">
  <div class="velin-col">Fills remaining</div>
  <div class="velin-col-auto">Sized to content</div>
  <div class="velin-col">Fills remaining</div>
</div>

Fills remaining

Sized to content

Fills remaining

Offsetting Columns

Use .velin-offset-{n} to push columns to the right by n column widths.

<div class="velin-row">
  <div class="velin-col-4 velin-offset-4">Centered column</div>
</div>
<div class="velin-row">
  <div class="velin-col-3 velin-offset-3">Offset by 3</div>
  <div class="velin-col-3 velin-offset-3">Offset by 3</div>
</div>

Centered

Offset 3