Open In App

Semantic-UI Grid Row Grouping

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </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:

Semantic-UI Grid Row Grouping

Semantic-UI Grid Row Grouping

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=
          rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </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=
            </div>
            <div class="column">
                <img src=
            </div>
            <div class="column">
                <img src=
            </div>
            <div class="column">
                <img src=
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Grid Row Grouping

Semantic-UI Grid Row Grouping

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



Last Updated : 13 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads