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 =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< 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 =
< link rel = "stylesheet" href =
< link rel = "stylesheet" href =
< 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:
Spectre Gapless Flexbox Grid
Reference link: https://picturepan2.github.io/spectre/layout/grid.html#grid-gapless
Share your thoughts in the comments
Please Login to comment...