Skip to content
Related Articles

Related Articles

Semantic-UI Grid Gutters

View Discussion
Improve Article
Save Article
  • Last Updated : 29 Mar, 2022

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 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!