Semantic-UI Grid Gutters

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= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </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= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </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>