Layout Rows & Columns

Rows & Columns

The Row/Column system is a 10-unit flexible flexbox distribution utility. While the Grid system is ideal for two-dimensional layouts, Rows are better suited for one-dimensional alignment and distribution of UI elements with variable content widths.

Basic Distribution

Centered Column Row

Commonly used for login forms and landing page heroes.

wf-screen-6 (Centered)
HTML 
<div class="wf-row wf-justify-center wf-items-center">
  <div class="wf-column wf-screen-6">...</div>
</div>

Interactive Example

Responsive Flex Columns

Observe how the 4-column layout on desktop ( 3/2/1/4 ) switches to 2-columns on ( 4/2/2/2 ) tablet and full-width on mobile.

Rows Preview
screen
HTML 
<div class="wf-row wf-gap-3">
  <div class="wf-column wf-screen-3 wf-tablet-4">...</div>
  <div class="wf-column wf-screen-2 wf-tablet-2">...</div>
  <div class="wf-column wf-screen-3 wf-tablet-2">...</div>
  <div class="wf-column wf-screen-3 wf-tablet-2">...</div>
</div>

Alignment & Distribution

Vertical Alignment

Use wf-items-* to control the flow of items.

Items Center
Main Item
HTML 
<div class="wf-row wf-items-center ...">
  <div class="wf-column">...</div>
  <div class="wf-column">...</div>
</div>

Vertical Self-Alignment

Use wf-self-* to control the flow of items.

Self End
Main Item
HTML 
<div class="wf-row ...">
  <div class="wf-column wf-self-end">...</div>
  <div class="wf-column">...</div>
</div>

Distribute Items Between

Use wf-justify-* to control the distribution of items.

Item 1
Item 2
Item 3
HTML 
<div class="wf-row wf-justify-between ...">
  <div class="wf-column">...</div>
  <div class="wf-column">...</div>
  <div class="wf-column">...</div>
</div>

Distribute Space Around

Use wf-justify-* to control the distribution of items.

Item 1
Item 2
Item 3
HTML 
<div class="wf-row wf-justify-around ...">
  <div class="wf-column">...</div>
  <div class="wf-column">...</div>
  <div class="wf-column">...</div>
</div>

Class Reference

All modifier classes available on .wf-row and .wf-column

Class Name Type Description
wf-row Base Initializes the flex container with negative margins to offset column padding.
wf-column, wf-column-auto Child The basic column unit. Defaults to full width on phone screens.
wf-screen-1 ... 10 Breakpoint Defines the column width on desktop screens (10-column scale).
wf-tablet-1 ... 10 Breakpoint Defines the column width on tablet screens (10-column scale).
wf-justify-* Alignment Horizontal distribution: start, center, end, between.
wf-items-* Alignment Vertical alignment: start, center, end.
wf-self-* Alignment Vertical self alignment: start, center, end.