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 columns
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>