Flexbox grid#

Layout includes flexbox based responsive grid system with 12 columns.

<!-- flexbox grid example -->
<div class="container">
  <div class="columns">
    <div class="column col-6">col-6</div>
    <div class="column col-3">col-3</div>
    <div class="column col-2">col-2</div>
    <div class="column col-1">col-1</div>
  </div>
</div>

Add the columns class to a container with the container class. And add any element you want with the column class inside the container. These columns will take up the space equally. You can specify the width of each column by adding class col-<1-12>.

Gapless grid#

And you can add the col-gapless class to the columns to have gapless columns.

<!-- gapless columns -->
<div class="columns col-gapless">
  <div class="column col-6">col-6</div>
  <div class="column col-6">col-6</div>
</div>

By default, Spectre grid has multi-line flexbox enabled. You can add the col-oneline class to columns to make all its child columns positioned in the same single row.

<!-- one line columns -->
<div class="columns col-oneline">
  <div class="column col-8">col-8</div>
  <div class="column col-8">col-8</div>
</div>

Grid nesting#

To nest grids, add the new columns and column structure within an existing column.

<!-- grid nesting example -->
<div class="container">
  <div class="columns">
    <div class="column col-6">col-6
      <div class="columns">
        <div class="column col-6">col-6</div>
        <div class="column col-6">col-6</div>
      </div>
    </div>
    <div class="column col-6">col-6</div>
  </div>
</div>

Column offset#

The Flexbox grid provides margin auto utilities to set offset. There are col-mx-auto, col-ml-auto and col-mr-auto to set margins between columns without using empty columns.

<!-- grid offset example -->
<div class="container">
  <div class="columns">
    <div class="column col-4 col-mr-auto">col-4 col-mr-auto</div>
    <div class="column col-2">col-2</div>
  </div>
</div>

Auto width column#

You can add the col-auto class to the column to have auto width columns. There are col-xl-auto, col-lg-auto, col-md-auto, col-sm-auto and col-xs-auto to set auto width in different viewport sizes.

<!-- auto width column example -->
<div class="container">
  <div class="columns">
    <div class="column col-auto">col-auto</div>
    <div class="column">col</div>
  </div>
</div>

<div class="container">
  <div class="columns">
    <div class="column col-lg-auto col-6">col-lg-auto</div>
    <div class="column">col</div>
  </div>
</div>