Skip to content
Related Articles
Open in App
Not now

Related Articles

Semantic-UI Grid

Improve Article
Save Article
  • Last Updated : 18 Oct, 2022
Improve Article
Save Article

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=
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!