Open In App

Semantic-UI Responsive Grid Stackable

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 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 Stackable is used to stack the grid element in mobile or small screen devices. It will automatically stack all rows to a single column.

Semantic-UI Responsive Grid Stackable Class:

  • stackable: This class is used to automatically stack all the grid elements on a mobile devices.

Syntax:

<div class="ui stackable four column grid">
      <div class="column"></div>
      ...
</div>

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Responsive Grid Stackable
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>
            Semantic-UI Responsive Grid Stackable
        </h3>
  
        <div class="ui stackable four column grid 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. Hypertext 
                defines the link between the web pages. A
                markup language is used to define the text 
                document within tag which defines the 
                structure of web pages.
            </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. It allows you to apply styles 
                to web pages. More importantly, it enables 
                you to do this independent of the HTML that
                makes up each web page.
            </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. It is well-known for 
                the development of web pages, many non-browser 
                environments also use it. JavaScript can be 
                used for Client-side developments as well as
                Server-side developments.
            </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. 
                Elaborating the terms, it simplifies HTML 
                document traversing and manipulation, browser 
                event handling, DOM animations, Ajax 
                interactions, and cross-browser JavaScript 
                development.
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Responsive Grid Stackable

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Responsive Grid Stackable
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>
            Semantic-UI Responsive Grid Stackable
        </h3>
  
        <div class="ui stackable six column grid 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 class="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="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:

Semantic-UI Responsive Grid Stackable

Semantic-UI Responsive Grid Stackable

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



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