Semantic-UI Responsive Grid Containers - Coding

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= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</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= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> 
</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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Primer CSS Select Menu Header
Primer CSS Flexbox Flex
Primer CSS Flexbox Order
Primer CSS Flexbox Flex Container
Primer CSS Button with Icons

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	10