Semantic-UI Page Grids

Last Updated : 14 Mar, 2022

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

A Semantic UI grid is used to harmonize negative space in a layout. Version 1.X of Semantic UI Semantic-UI Page Grids were used to contain the maximum width of grids holding page content. Now the Semantic UI Page Grid has been deprecated in favor of the simpler container element.

Semantic UI Page Grids Class: This is now deprecated. Rather than using a page grid, prefer using a ui grid container to include top-level page content inside a grid.

grid container: This class is used to set the grid container.

Syntax:

<div class="ui four column doubling stackable grid container">
  <div class="column">
   ....
  </div>
  ....
</div>

Example 1: In this article, we will use the three-column doubling stackable grid container as a replacement for the Page grid.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Page Grid</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>
            Semantic UI Page Grid Containers            
        </strong>
        <br>
        <div class="ui three column doubling 
                stackable grid container">
          <div class="column">
             
<p>HTML</p>
 
             
<p>Hypertext Markup Language</p>
 
          </div>
          <div class="column">
             
<p>CSS</p>
 
             
<p>Cascading Stylesheet</p>
 
          </div>
          <div class="column">
             
<p>JS</p>
             
             
<p>JavaScript</p>
 
          </div>
       </div>
    </center>
</body>
</html>

Output:

Semantic-UI Page Grids

Example 2: In this example, we will use the four-column doubling stackable container grid as a replacement of the Page grid with the colorful columns header. As it is four column container, the columns seem to be on the left side, the last column appears to be empty.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Page Grid</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
</head>
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong>
            Semantic UI Page Grid Containers
        </strong>
     
        <br><br>
        <div class="ui four column doubling
                    stackable grid container">
          <div class="column">
            <p class="ui green header">HTML</p>
 
             
<p>Hypertext Markup Language</p>
 
          </div>
          <div class="column">
            <p class="ui green header">CSS</p>
 
             
<p>Cascading Stylesheet</p>
 
          </div>
          <div class="column">
            <p class="ui green header">JS</p>
 
             
<p>JavaScript</p>
 
          </div>
        </div>
    </center>
</body>
</html>