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= </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
Please Login to comment...