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.
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI Responsive Grid Manual Tweaks
</ title >
< link rel = "stylesheet" href =
</ 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.
<!DOCTYPE html> < html >
< head >
< title >
Semantic-UI Responsive Grid Manual Tweaks
</ title >
< link rel = "stylesheet" href =
</ 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 >
|
Output:
Reference: https://semantic-ui.com/collections/grid.html#manual-tweaks