Open In App

Semantic-UI Responsive Grid Containers

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.

Grid is an essential component in any website as it efficiently aligns space and improves the user interface. Semantic-UI provides us with a component known as Responsive Grid Container. This component contains a container that can be used alongside a grid to provide a responsive, fixed-width container for wrapping the contents of a page.

Responsive Grid Container Class:

  • ui grid container: This class is used to create a grid container that is responsive in nature.

Syntax:

<div class="ui grid container">
    ...
</div>

Example 1: In the following program, we will be creating a Responsive Grid Container using the ui grid container class.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Semantic-UI Responsive Grid Container</title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <div class="ui green header">GeeksforGeeks</div>
        <strong>Semantic-UI Responsive Grid Container</strong>
    </center>
    <div class="ui grid container">
        <!--Grid Container-->
        <div class="four wide column">
            1
        </div>
        <div class="four wide column">
            2
        </div>
        <div class="four wide column">
            3
        </div>
        <div class="four wide column">
            4
        </div>
        <div class="four wide column">
            5
        </div>
        <div class="four wide column">
            6
        </div>
        <div class="four wide column">
            7
        </div>
        <div class="four wide column">
            8
        </div>
    </div>
</body>
  
</html>


Output

 

Example 2: In the following program, we will be understanding the difference between a normal grid and a grid container that is responsive in nature.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Semantic-UI Responsive Grid Container</title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <div class="ui green header">GeeksforGeeks</div>
        <strong>Semantic-UI Responsive Grid Container</strong>
    </center>
    <br>
    <strong>Normal Grid</strong>
    <div class="ui grid">
        <div class="four wide column">
            1
        </div>
        <div class="four wide column">
            2
        </div>
        <div class="four wide column">
            3
        </div>
        <div class="four wide column">
            4
        </div>
    </div>
    <br>
    <br>
    <strong>Container Grid</strong>
    <div class="ui grid container">
        <!--Grid Container-->
        <div class="four wide column">
            1
        </div>
        <div class="four wide column">
            2
        </div>
        <div class="four wide column">
            3
        </div>
        <div class="four wide column">
            4
        </div>
    </div>
</body>
  
</html>


Output

 

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



Last Updated : 24 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads