Skip to content
Related Articles

Related Articles

Semantic-UI Special Row Grids

Improve Article
Save Article
  • Last Updated : 13 Mar, 2022
Improve Article
Save Article

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 Special Grids Row is a special type of grid layout that divide or celled the require row wrappers to add some additional formatting.

Semantic-UI Special Grids Row Used Class:

  • internally celled: This class is used to add divider formatting inside the grid element.
  • externally celled: This class is used to add divider formatting inside and outside of the grid element.

Syntax:

<div class="ui internally celled grid">
      <div class="row">
        <div class="*number wide column">
            ...
        </div>
        ...
       </div>
</div>

Example 1: This example describes the uses of Semantic-UI Special Grids Row.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Special Grids Row
    </title>
  
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Special Grids Row</h3>
    </div>
  
    <div class="ui container externally 
        celled grid center aligned">
        <div class="row">
            <div class="four wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
        </div>
        <div class="row">
            <div class="four wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
            <div class="four wide column">
                <img src=
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Example 2: This example describes the uses of Semantic-UI Special Grids Row.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Grid Special Grids Row
    </title>
  
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>Semantic-UI Grid Special Grids Row</h3>
    </div>
  
    <div class="ui container externally
        celled grid center aligned">
        <div class="row">
            <div class="six wide column justified">
                <p>
                    HTML stands for HyperText Markup Language. 
                    It is used to design web pages using a 
                    markup language. HTML is the combination 
                    of Hypertext and Markup language. Hypertext 
                    defines the link between the web pages. A 
                    markup language is used to define the text 
                    document within tag which defines the 
                    structure of web pages.
                </p>
            </div>
            <div class="four wide column">
                <img src=
            </div>
            <div class="six wide 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="row">
            <div class="four wide column">
                <img src=
            </div
            <div class="eight wide column justified">
                <p>
                    Cascading Style Sheets fondly referred to 
                    as CSS, is a simply designed language intended 
                    to simplify the process of making web pages 
                    presentable. CSS allows you to apply styles 
                    to web pages. More importantly, CSS enables 
                    you to do this independent of the HTML that 
                    makes up each web page.
                </p>
            </div>
            <div class="four wide column">
                <img src=
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!