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/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" >w3wiki</ 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" > w3wiki </ 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 Beginner </ div > < div class = "column col-4 bg-warning" > w3wiki </ 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/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" >w3wiki</ 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" > w3wiki </ 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
Contact Us