Semantic-UI Varying Grid Significant Word Order

Last Updated : 17 Mar, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

Semantic-UI Grid is used to harmonize the negative space in our webpage layout. Varying Grid Significant Word Order is used to align the things horizontal or vertical. We can align the columns and text using Significant Word Order classes. In this article, we will discuss Varying Grid Significant Word Order in Semantic-UI.

Semantic-UI Varying Grid Significant Word Order Classes:

left floated: This class is used to float the column left.
right floated: This class is used to float the column right.
center aligned: This class is used to align the content in the center.
left aligned: This class is used to align the content on the left.
right aligned: This class is used to align the content on the right.

Syntax:

<div class="ui Significant-Word-Order-Class 
     grid">
   .....
</div>

Example 1: The following code demonstrates the Semantic-UI Varying Grid Significant Word Order using left floated, right floated, left aligned, and right aligned classes.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
  <title>Semantic-UI Varying Grid Significant Word Order</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 class="ui green header"> GeeksforGeeks </h2>   
    <h3> Semantic-UI Varying Grid Significant Word Order </h3> 
  </div> <br> 
    
  <div class="ui grid"> 
    <div class="left floated right aligned seven wide column"> 
      <div class="ui segment"> 
        GFG Left floated Right aligned 
      </div> 
    </div> 
      
    <div class="right floated left aligned seven wide column"> 
      <div class="ui segment"> 
        GFG Right floated left aligned 
      </div> 
    </div> 
  
    <div class="right floated seven wide column"> 
      <div class="ui segment"> 
        GeeksforGeeks Right floated 
      </div> 
    </div> 
  </div> 
</body> 
  
</html>

Output:

Semantic-UI Varying Grid Significant Word Order

Example 2: The following code demonstrates the Semantic-UI Varying Grid Significant Word Order using center aligned class.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
  <title> Semantic-UI Varying Grid Significant Word Order </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 class="ui green header"> GeeksforGeeks </h2>   
    <h3> Semantic-UI Varying Grid Significant Word Order </h3> 
  </div> <br> 
    
  <div class="ui right aligned grid"> 
    <div class="left floated center  
                aligned four wide column"> 
      <div class="ui segment"> 
        GFG Left floated Center aligned 
      </div> 
    </div> 
      
    <div class="right floated center  
                aligned four wide column"> 
      <div class="ui segment"> 
        GFG Right floated Center aligned 
      </div> 
    </div> 
  
    <div class="right floated center 
                aligned ten wide column"> 
      <div class="ui segment"> 
        GFG Right floated Center aligned 
      </div> 
    </div> 
  
    <div class="center aligned sixteen 
                wide column"> 
      <div class="ui segment"> 
        GeeksforGeeks Center aligned 
      </div> 
    </div> 
  </div> 
</body> 
  
</html>