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
.png)
