Spectre Gapless Flexbox Grid

Spectre Gapless Flexbox Grid class is used to create a flexbox to remove the space between the boxes. 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. To create a gapless we need to add the col-gapless class to the columns to have gapless columns.

Spectre Gapless Flexbox Grid Class:

• col-gapless: This class is used to remove the gap between flex boxes.
• col-oneline: This class make all its child columns positioned in the same single row.

Note: This col-oneline class is used to make all the columns in a single row.

Syntax:

<div class="columns col-gapless">
 <div class="column col-*">
 ....
 </div>
 ....
</div>

Example 1: Below example illustrate the Spectre Gapless Flexbox Grid.

Output:

👁 Spectre Gapless Flexbox Grid

Example 2:

Output:

👁 Spectre Gapless Flexbox Grid

Reference link: https://picturepan2.github.io/spectre/layout/grid.html#grid-gapless