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.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Spectre Gapless Flexbox Grid</title>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">

    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Gapless Flexbox Grid</strong>
        <br><br>
    </center>
    <strong>Spectre Gapless: col-gapless</strong>
    <div class="columns col-gapless">
        <div class="column col-6 bg-success">
            Geeksforgeeks
        </div>
        <div class="column col-6 bg-primary">
            Spectre CSS
        </div>
    </div>
    <br>
    <div class="columns col-gapless">
        <div class="column col-8 bg-error">
            A Computer Science Portal for Geeks
        </div>
        <div class="column col-4 bg-warning">
            Geeksforgeeks
        </div>
    </div>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Spectre Gapless Flexbox Grid</title>
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">

    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>Spectre Gapless Flexbox Grid</strong>
        <br><br>
    </center>
    <strong>Spectre Gapless: col-oneline</strong>
    <div class="columns col-oneline">
        <div class="column col-8 bg-success">
            Geeksforgeeks
        </div>
        <div class="column col-6 bg-primary">
            Spectre CSS
        </div>
    </div>
</body>

</html>

Output:

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

Spectre Gapless Flexbox Grid

Explore