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=
"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>

Output:

Reference: https://semantic-ui.com/collections/grid.html#gutters

Semantic-UI Grid Gutters

Explore