Spectre Gapless Flexbox Grid

Last Updated : 16 Feb, 2022

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/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/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:

Spectre Gapless Flexbox Grid

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Spectre Gapless Flexbox Grid</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/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> 