Skip to content
Related Articles

Related Articles

Semantic-UI Responsive Grid Containers

View Discussion
Improve Article
Save Article
  • Last Updated : 24 Apr, 2022

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!