Semantic-UI Nesting Grids

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>

Output:

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

Semantic-UI Nesting Grids

Explore