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.

Output:

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