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 =
</ 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...