Semantic-UI Grid Row Clearing Content

Last Updated : 13 Mar, 2022

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 Clearing Content Row is used to clear the previous columns and make them useful when we will use floated variations.

Semantic-UI Grid Clearing Content Row Used Class:

left floated: This class is used to place the grid element on the left side.
right floated: This class is used to place the grid element on the right side.

Syntax:

<div class="ui grid">
      <div class="*number column row">
        <div class="left floated column"></div>
        ...
      </div>
      ...
</div>

Example 1: This example describes the uses of Semantic-UI Grid Clearing Content Row.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Grid Clearing Content 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"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Grid Clearing Content Row</h3> 
  
        <div class="ui grid"> 
            <div class="four column row"> 
                <div class="left floated 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="right floated 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> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Semantic-UI Grid Row Clearing Content

Example 2: This example describes the uses of Semantic-UI Grid Clearing Content Row.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Grid Clearing Content 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"> 
            GeeksforGeeks 
        </h2> 
  
        <h3>Semantic-UI Grid Clearing Content Row</h3> 
  
        <div class="ui grid row"> 
            <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 class="five 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 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> 
    </div> 
</body> 
  
</html>