Skip to content
Related Articles

Related Articles

Semantic-UI Nesting Grids

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

Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. 

Semantic-UI Grid is used to harmonize negative space in a layout. The Nesting Grids are used to place the grid inside another grid that helps us to sub-division the columns. In this article, we will discuss Semantic-UI Nesting Grids.

Semantic-UI Nesting Grids Class:

  • grid: This class is used to create the grid.
  • ui * column grid: This class is used to create the grid structure for the specified number of columns. The star can be replaced with a number.

Syntax:

<div class="ui ... grid">
  <div class="column">
    <div class="ui ... grid">
      <div class="column"></div>
       ...
    </div>
  </div>
  ...
</div>

Example: The following example demonstrates the Semantic-UI Nesting Grids.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
        <h3>
            Semantic-UI Nesting Grids
        </h3>
        <div class="ui two column grid">
            <div class="column">
                <div class="ui four column grid">
                    <div class="green column">
                        GFG Nested 
                    </div>
                    <div class="red column">
                        GFG Nested 
                    </div>
                    <div class="blue column">
                        GFG Nested 
                    </div>
                    <div class="orange column">
                        GFG Nested 
                    </div>
                </div>
            </div>
            <div class="pink column"
                GeeksforGeeks 
            </div>
            <div class="grey column"
                GeeksforGeeks 
            </div>
            <div class="column">
                <div class="ui grid">
                    <div class="green four wide column">
                        GFG Nested 
                    </div>
                    <div class="blue three wide column">
                        GFG Nested 
                    </div>
                    <div class="red nine wide column">
                        GFG Nested 
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Semantic-UI Nesting Grids

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!