Semantic-UI Responsive Grid Manual Tweaks
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= </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= </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
Please Login to comment...