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.
<!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:
Example 2: This example describes the uses of Semantic-UI Responsive Grid Stackable.
<!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:
Reference: https://semantic-ui.com/collections/grid.html#stackable