Semantic-UI Grid Row Grouping
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. It makes web pages look amazing and responsive.
Semantic UI Grid is used to harmonize negative space in a layout. The grid layout is used to create a grid-based layout system with the help of rows and columns. Grid is very easy to design any webpage without using floats and positioning.
Semantic-UI Grid Grouping Row is used to add some groups of the column grid elements. It uses on-row wrappers to merge the grid and make a single grid layout.
Semantic-UI Grid Grouping Row Used Class:
- *number column row: This class is used to group the row grid layout.
Syntax:
<div class="ui *number column grid"> <div class="*number column row"> <div class="column"></div> </div> ... </div>
Note: The *number is replaceable with the integer number(Alphabetic).
Example 1: This example describes the uses of Semantic-UI Grid Grouping Row.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Grid Grouping Row </ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Grid Grouping Row</ h3 > < div class = "ui four column grid" > < div class = "two column row" > < div class = "column justified" > < p > JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </ p > </ div > </ div > < div class = "column justified" > < p > JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </ p > </ div > < div class = "column justified" > < p > JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </ p > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: This example describes the uses of Semantic-UI Grid Grouping Row.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Grid Grouping Row </ title > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Grid Grouping Row</ h3 > < div class = "ui four column externally celled grid" > < div class = "two column row" > < div class = "column justified" > < p > JavaScript is a lightweight, cross-platform, and interpreted scripting language. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </ p > </ div > </ div > < div class = "column" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" > </ div > < div class = "column" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" > </ div > < div class = "column" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" > </ div > < div class = "column" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/collections/grid.html#grouping
Contact Us