Template:Columns

This template allows you to format the page in responsive column-style layout.

Simply include the template anywhere in the page and use the block classes provided in the example below to structure your page layout.

Examples

<!-- Row of columns of equal size: -->
<div class="columns-row">
  <div class="columns-col">
    Column 1
  </div>
  <div class="columns-col">
    Column 2, will be next to Column 1, but will wrap under it if there's not enough horizontal space (like on mobile).
  </div>
  <div class="columns-col">
    Column 3, will also wrap under if there's not enough horizontal space (like on mobile).
  </div>
</div>

   Column 1

   Column 2, will be next to Column 1, but will wrap under it if there's not enough horizontal space (like on mobile).

   Column 3, will also wrap under if there's not enough horizontal space (like on mobile).

<!-- One bigger clumn: -->
<div class="columns-row">
  <div class="columns-col columns-col-2">
    Column 1 is twice as big as Column 2
  </div>
  <div class="columns-col">
    Column 2
  </div>
</div>

   Column 1 is twice as big as Column 2

   Column 2