Semantic-UI Responsive Grid Doubling

Last Updated : 13 Mar, 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 looks more amazing. It uses a class to add CSS to the elements.

Semantic-UI Grid layout is used to harmonize the negative space layout. The grid element is used to create a grid-based layout system that helps the rows and columns. Grid elements makes it easier to design any webpage without using floats and positioning.

Semantic-UI Responsive Grid Doubling is used to double the column widths for each device jump. If we change the screen size, the width of grid element changes automatically.

Semantic-UI Responsive Grid Doubling Class:

doubling: This class is used to double the column widths for each device jump.

Syntax:

<div class="ui grid">
      <div class="doubling eight column row">
        <div class="column"></div>
        ...
    </div>
    ...
</div>

Example 1: This example describes the uses of Semantic-UI Responsive Grid Doubling.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Responsive Grid Doubling 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3> 
            Semantic-UI Responsive Grid Doubling 
        </h3> 
  
        <div class="ui four column grid doubling justified"> 
            <div class="column"> 
                HTML stands for HyperText Markup Language.  
                It is used to design web pages using a  
                markup language. It is the combination of  
                Hypertext and Markup language. 
            </div> 
            <div class="column"> 
                CSS (Cascading Style Sheets) is a stylesheet  
                language used to design the webpage to make  
                it attractive. The reason for using this is  
                to simplify the process of making web pages  
                presentable. 
            </div> 
            <div class="column"> 
                JavaScript is the world most popular  
                lightweight, interpreted compiled programming  
                language. It is also known as scripting  
                language for web pages.  
            </div> 
            <div class="column"> 
                jQuery is an open-source JavaScript library  
                that simplifies the interactions between an  
                HTML/CSS document, or more precisely the  
                Document Object Model (DOM), and JavaScript.  
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example describes the uses of Semantic-UI Responsive Grid Doubling.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Responsive Grid Doubling 
    </title> 
  
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui container center aligned"> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <h3> 
            Semantic-UI Responsive Grid Doubling 
        </h3> 
  
        <div class="ui six column grid doubling justified"> 
            <div class="green column"> 
                HTML stands for HyperText Markup Language.  
                It is used to design web pages using a  
                markup language. It is the combination of  
                Hypertext and Markup language. 
            </div> 
            <div class="yellow column"> 
                CSS (Cascading Style Sheets) is a stylesheet  
                language used to design the webpage to make  
                it attractive. The reason for using this is  
                to simplify the process of making web pages  
                presentable. 
            </div> 
            <div class="red column"> 
                JavaScript is the world most popular  
                lightweight, interpreted compiled programming  
                language. It is also known as scripting  
                language for web pages.  
            </div> 
            <div class="yellow column"> 
                jQuery is an open-source JavaScript library  
                that simplifies the interactions between an  
                HTML/CSS document, or more precisely the  
                Document Object Model (DOM), and JavaScript.  
            </div> 
            <div class="red column"> 
                Bootstrap is a free and open-source tool  
                collection for creating responsive websites  
                and web applications. It is the most popular  
                HTML, CSS, and JavaScript framework for  
                developing responsive, mobile-first websites. 
            </div> 
            <div class="green column"> 
                Pure CSS is a CSS framework. It is a set  
                of free and open-source tools for building  
                responsive websites and web applications.  
                Yahoo developed this, which is used to make  
                websites that are quicker, more elegant,  
                and more responsive. 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>