Semantic-UI Varying Grid Centering Content

Last Updated : 21 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 Centering Content is used to center the columns inside the grid. If the row does not take all the sixteen grid columns space then we can center the columns using centered class. In this article, we will discuss Varying Grid Centering Content in Semantic CSS.

Semantic-UI Varying Grid Centering Content Class:

centered: This class is used to center the columns inside the grid.

Syntax:

<div class="ui *columns centered grid">
   .....
</div>

Example 1: The following code demonstrates the Semantic-UI Varying Grid Centering Content.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
  <title> Semantic-UI Varying Grid Centering Content </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 Centering Content </h3> 
  </div> <br> 
    
  <div class="ui two column centered grid"> 
    <div class="blue column"> GeeksforGeeks 1 </div> 
  
    <div class="four column centered row"> 
      <div class="red column"> GeeksforGeeks 2 </div> 
      <div class="green column"> GeeksforGeeks 3 </div> 
    </div> 
  </div> 
</body> 
  
</html>

Output:

Semantic-UI Varying Grid Centering Content

Example 2: The following code demonstrates the Semantic-UI Varying Grid Centering Content with more rows and columns.

HTML

<!DOCTYPE html> 
<html> 
      
<head> 
  <title> Semantic-UI Varying Grid Centering Content </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 Centering Content </h3> 
  </div> <br> 
    
  <div class="ui three column centered grid"> 
    <div class="green column"> GeeksforGeeks 1 </div> 
    <div class="blue column"> GeeksforGeeks 2 </div> 
    <div class="red column"> GeeksforGeeks 3 </div> 
  
    <div class="four column centered row"> 
      <div class="red column"> GeeksforGeeks 4 </div> 
      <div class="green column"> GeeksforGeeks 5 </div> 
      <div class="yellow column"> GeeksforGeeks 6 </div> 
    </div> 
  
    <div class="two column centered row"> 
      <div class="blue column"> GeeksforGeeks 7 </div> 
    </div> 
  
    <div class="three column centered row"> 
      <div class="red column"> GeeksforGeeks 8 </div> 
    </div> 
  </div> 
</body> 
  
</html>