Semantic-UI Grid

Semantic UI is a UI framework based on CSS preprocessor less and jQuery. It is used to build beautiful and responsive web experiences using the elements and modules which come bundled with it.

The Semantic UI grids are divided into horizontal units which are known as columns and vertical units are known as rows. Each row in a grid has a fixed amount of columns in it. By default, Semantic UI follows a 16-column system, i.e., each row in a grid is divided into 16 units and each column can specify the number of units it occupies. For example, 5 three-wide columns can fit in a row as 16 divided by 3 is 5.

Types of Grids:

columns: In this type of grid, the grids are divided into horizontal units.

Class-Name	Description
two wide column	It specifies a column that occupies 2 unit width out of 16.
three wide column	It specifies a column that occupies a 3-unit width out of 16.
four wide column	It specifies a column that occupies a 4-unit width out of 16.
five wide column	It specifies a column that occupies 5-unit width out of 16.
six wide column	It specifies a column that occupies a 6-unit width out of 16.
seven wide column	It specifies a column that occupies a 7-unit width out of 16.
eight wide column	It specifies a column that occupies an 8-unit width out of 16.
nine wide column	It specifies a column that occupies a 9-unit width out of 16.
ten wide column	It specifies a column that occupies 10-unit width out of 16.
eleven wide column	It specifies a column that occupies 11 units of width out of 16.
twelve wide column	It specifies a column that occupies 12 units width out of 16.
thirteen wide column	It specifies a column that occupies 13 units width out of 16.
fourteen wide column	It specifies a column that occupies 14 units of width out of 16.
fifteen wide column	It specifies a column that occupies 15 units width out of 16.
sixteen wide column	It specifies a column that occupies 16 units width out of 16.

rows: In this type of grid, the grids are divided into vertical units.

Class-Name	Description
row	This class is used to insert the rows in the layout.

variable grid: It facilitates the alignment of the content either horizontal or vertical, along with styling with different color variations in the grid.

responsive grid: It offers us five types of Responsive grids Containers, Stackable, Reverse Order, Doubling, and Manual Tweaks.

Example 1: In the below code, we will use the above classes to demonstrate the use of the grid.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic UI - Grid Columns</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>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
    <style>
        .ui.container {
            text-align:center;
        }        
        h3 {
            margin-top:0px;
        }        
        .ui.grid {
            margin-top:25px;
        }        
        .ui.grid .column {
            background-clip:content-box;
            height:100px;
            color:white;
            background-color:black;
        }
    </style>
</head>

<body>
    <div class="ui container">
        <div>
            <h1 style="color:green">
                GeeksforGeeks
            </h1>
            <h3>Semantic UI - Grid Columns </h3>
        </div>
        <div class="ui grid">
            <div class="two wide column">
                two wide column
            </div>
            <div class="nine wide column">
                nine wide column
            </div>
            <div class="five wide column">
                five wide column
            </div>
        </div>
    </div>
</body>
</html>

Output:

Example 2: In the below code, we will use the above classes to demonstrate the use of the grid.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Semantic-UI Grid Rows</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" />
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <h1 class="ui header green">
        GeeksforGeeks
    </h1>
    <strong> Semantic UI Grid Rows </strong>
    <br/><br/>
    <div class="ui six column grid">
        <div class="row">
            <div class="column">
                <button>GfG</button>
            </div>
            <div class="column">
                <button>GfG</button>
            </div>
            <div class="column">
                <button>GfG</button>
            </div>
            <div class="column">
                <button>GfG</button>
            </div>
        </div>
    </div>
</body>
</html>

Output:

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

Explore