Semantic-UI Nesting Grids

Last Updated : 29 Mar, 2022

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