Layout Rows

A layout row holds the columns of a page. This page shows rows with more than one column.

You decide three things when you place a row:

how many columns you want,
how the width is split between the columns, for example 50:50,
and whether the row sits at page width or runs full width.

You set all of this with classes on the row, so you never touch the layout or write any CSS. The rest of this page shows every split, first at page width and then at full width, with the markup next to each one.

The markup of a row

A row is a <div class="layout-row"> with a class that sets the split. Inside it you put one <div class="layout-col"> for each column. Here is the full markup for a two-column row split three quarters against one quarter:

<div class="layout-row layout-row--75-25">
  <div class="layout-col">[[column-1]]</div>
  <div class="layout-col">[[column-2]]</div>
</div>

To change the split, swap the split class. To make the row full width, add layout-row--full-width. Every example below shows only that one row line, because the columns stay the same.

At page width

These rows sit at page width, the same width as this text. The split class sets how that width is divided between the columns.

75-25 – three quarters, one quarter

Three quarters of the row. Two columns split three to one, the wider one first.

One quarter of the row. Two columns split three to one, the narrow one second.

<div class="layout-row layout-row--75-25">

67-33 – two thirds, one third

Two thirds of the row. Two columns split two to one, the wider one first.

One third of the row. Two columns split two to one, the narrow one second.

<div class="layout-row layout-row--67-33">

60-40 – three fifths, two fifths

Three fifths of the row. Two columns split three to two, the wider one first.

Two fifths of the row. Two columns split three to two, the narrow one second.

<div class="layout-row layout-row--60-40">

25-75 – one quarter, three quarters

One quarter of the row. Two columns split one to three, the narrow one first.

Three quarters of the row. Two columns split one to three, the wider one second.

<div class="layout-row layout-row--25-75">

33-67 – one third, two thirds

One third of the row. Two columns split one to two, the narrow one first.

Two thirds of the row. Two columns split one to two, the wider one second.

<div class="layout-row layout-row--33-67">

40-60 – two fifths, three fifths

Two fifths of the row. Two columns split two to three, the narrow one first.

Three fifths of the row. Two columns split two to three, the wider one second.

<div class="layout-row layout-row--40-60">

25-25-50 – two quarters, then a half

One quarter of the row. Three columns, a quarter, a quarter and a half.

One half of the row. Three columns, a quarter, a quarter and a half.

<div class="layout-row layout-row--25-25-50">

25-50-25 – one quarter, one half, one quarter

One quarter of the row. Three columns, a quarter, a half and a quarter.

One half of the row. Three columns, a quarter, a half and a quarter.

One quarter of the row. Three columns, a quarter, a half and a quarter.

<div class="layout-row layout-row--25-50-25">

50-25-25 – one half, then two quarters

One half of the row. Three columns, a half, a quarter and a quarter.

One quarter of the row. Three columns, a half, a quarter and a quarter.

<div class="layout-row layout-row--50-25-25">

25-25-25-25 – four quarters

One quarter of the row. Four columns of equal width.

<div class="layout-row layout-row--25-25-25-25">

At full width

These are the same splits, each with layout-row--full-width added to the row. Now the row runs the full width of the screen, with only a margin at each edge, instead of stopping at page width. A full-width row has more room, so its columns stay side by side down to a narrower window before they stack.

75-25 – three quarters, one quarter

Three quarters of the row. Two columns split three to one, the wider one first.

One quarter of the row. Two columns split three to one, the narrow one second.

<div class="layout-row layout-row--75-25 layout-row--full-width">

67-33 – two thirds, one third

Two thirds of the row. Two columns split two to one, the wider one first.

One third of the row. Two columns split two to one, the narrow one second.

<div class="layout-row layout-row--67-33 layout-row--full-width">

60-40 – three fifths, two fifths

Three fifths of the row. Two columns split three to two, the wider one first.

Two fifths of the row. Two columns split three to two, the narrow one second.

<div class="layout-row layout-row--60-40 layout-row--full-width">

25-75 – one quarter, three quarters

One quarter of the row. Two columns split one to three, the narrow one first.

Three quarters of the row. Two columns split one to three, the wider one second.

<div class="layout-row layout-row--25-75 layout-row--full-width">

33-67 – one third, two thirds

One third of the row. Two columns split one to two, the narrow one first.

Two thirds of the row. Two columns split one to two, the wider one second.

<div class="layout-row layout-row--33-67 layout-row--full-width">

40-60 – two fifths, three fifths

Two fifths of the row. Two columns split two to three, the narrow one first.

Three fifths of the row. Two columns split two to three, the wider one second.

<div class="layout-row layout-row--40-60 layout-row--full-width">

25-25-50 – two quarters, then a half

One quarter of the row. Three columns, a quarter, a quarter and a half.

One half of the row. Three columns, a quarter, a quarter and a half.

<div class="layout-row layout-row--25-25-50 layout-row--full-width">

25-50-25 – one quarter, one half, one quarter

One quarter of the row. Three columns, a quarter, a half and a quarter.

One half of the row. Three columns, a quarter, a half and a quarter.

One quarter of the row. Three columns, a quarter, a half and a quarter.

<div class="layout-row layout-row--25-50-25 layout-row--full-width">

50-25-25 – one half, then two quarters

One half of the row. Three columns, a half, a quarter and a quarter.

One quarter of the row. Three columns, a half, a quarter and a quarter.

<div class="layout-row layout-row--50-25-25 layout-row--full-width">

25-25-25-25 – four quarters

One quarter of the row. Four columns of equal width.

<div class="layout-row layout-row--25-25-25-25 layout-row--full-width">