Semantic-UI Grid Gutters
Semantic UI is an open-source CSS based on less and jQuery used for developing beautiful and responsive web interfaces. It has a rich set of elements and modules which helps developers build websites faster.
In this article, we will be seeing the Semantic UI Grid Gutters.
Gutters are the white-space areas that separate columns in a grid. The size of gutters is constant irrespective of the width of the grid or the number of columns in a row. The width of the grid can be increased by using the relaxed grid.
Semantic UI Grid Gutters Classes:
- relaxed: This class is used on the grid container to increase the size of the gutters.
Syntax:
<div class="ui relaxed grid"> ... </div>
Example 1: The below example shows the basic example of grid gutters.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI | Grid Gutters - Normal</ title > < link rel = "stylesheet" href = < script src = </ script > < style > .ui.container { text-align: center; } .ui.grid{ margin-top: 25px; } /* Set to content box so that grid gutters can be seen clearly */ .row.column .column{ background-clip: content-box; } </ style > </ head > < body > < div class = "ui container" > < div > < h1 class = "ui header green" >GeeksforGeeks</ h1 > < h3 >Semantic UI | Grid Gutters - Normal</ h3 > </ div > < div class = "ui grid" > < div class = "row four column" > < div class = "column pink" >16/4</ div > < div class = "column pink" >16/4</ div > < div class = "column pink" >16/4</ div > < div class = "column pink" >16/4</ div > </ div > < div class = "row two column" > < div class = "column green" >16/2</ div > < div class = "column green" >16/2</ div > </ div > </ div > </ div > </ body > </ html > |
Output:

Example 2: The below example shows the grid gutters in a relaxed grid.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI | Grid Gutters - Relaxed</ title > < link rel = "stylesheet" href = < script src = </ script > < style > .ui.container { text-align: center; } .ui.grid{ margin-top: 25px; } .row.column .column{ background-clip: content-box; } </ style > </ head > < body > < div class = "ui container" > < div > < h1 class = "ui header green" >GeeksforGeeks</ h1 > < h3 >Semantic UI | Grid Gutters - Relaxed</ h3 > </ div > < div class = "ui grid relaxed" > < div class = "row four column" > < div class = "column pink" >16/4</ div > < div class = "column pink" >16/4</ div > < div class = "column pink" >16/4</ div > < div class = "column pink" >16/4</ div > </ div > < div class = "row two column" > < div class = "column green" >16/2</ div > < div class = "column green" >16/2</ div > </ div > </ div > </ div > </ body > </ html > |
Output:

Reference: https://semantic-ui.com/collections/grid.html#gutters
Please Login to comment...