Semantic-UI Responsive Grid Manual Tweaks

Last Updated : 23 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 Manual Tweak is used to add design patterns like doubling or stackable that are useful for creating simple responsive styling layout. We can also add styling by manually tweak device presentation by using (x) wide device or device only columns or rows.

Semantic-UI Responsive Grid Manual Tweak Class:

computer only: This class is used to display the grid size layout on computer device screen only.
*number wide: This class is used to set the grid width on device.

Syntax:

<div class="ui centered grid">
    <div class="*number wide tablet column">...</div>
    ...
</div>

Example 1: In this example, we will describe the use of Semantic-UI Responsive Grid Manual Tweak.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Responsive Grid Manual Tweaks 
    </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 Manual Tweaks 
        </h3> 
  
        <div class="ui centered grid"> 
            <div class="three wide tablet four wide computer 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="three wide tablet four wide computer 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="three wide tablet four wide computer 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="three wide tablet four wide computer 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="three wide tablet four wide computer 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="three wide tablet four wide computer 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>

Output:

Example 2: In this example, we will describe the use of Semantic-UI Responsive Grid Manual Tweak.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Semantic-UI Responsive Grid Manual Tweaks 
    </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 Manual Tweaks 
        </h3> 
  
        <div class="ui centered grid"> 
            <div class="green four wide tablet three wide computer 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 four wide tablet three wide computer 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 four wide tablet three wide computer 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="blue four wide tablet three wide computer 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 four wide tablet three wide computer 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> 
    </div> 
</body> 
  
</html>