Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks.
Semantic UI Responsive Grids offers us five types of Responsive grids as Containers, Stackable, Reverse Order, Doubling and Manual Tweaks. In this article we will know about all of the briefly.
Semantic UI Responsive Grids:
- Containers: It is used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
- Stackable: It is used so the stackable grid will automatically stack rows to a single columns on mobile devices.
- Reverse Order: It is used to make the grid reversed variations that allow you to reverse the order of columns or rows by device.
- Doubling: It is used so the grid can be double column widths for each device jump.
- Manual Tweaks: It is used to manually tweak device presentation by specifying (x) wide device or device only columns or rows.
Syntax:
<div class="ui Responsive-Grids grid"> <div class="column"></div> <div class="column"></div> ... </div>
Below example illustrate the Semantic UI Responsive Grids:
Example 1:
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Semantic-UI Responsive Grid</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<div class="ui green header">GeeksforGeeks</div>
<strong>Semantic-UI Menu Content</strong>
</center>
<strong>Manual Tweak:</strong>
<div class="ui centered grid">
<div class="computer only row">
<div class="column"></div>
</div>
<div class="six wide tablet eight wide computer column">HTML</div>
<div class="six wide tablet eight wide computer column">CSS</div>
<div class="six wide tablet eight wide computer column">JS</div>
<div class="six wide tablet eight wide computer column">PHP</div>
</div>
<strong>Doubling:</strong>
<div class="ui grid">
<div class="doubling four column row">
<div class="column">HTML</div>
<div class="column">CSS</div>
<div class="column">JS</div>
<div class="column">PHP</div>
</div>
</div>
<strong>Reverse Order:</strong>
<div class="ui mobile reversed equal width grid">
<div class="column">
HTML
</div>
<div class="column">
CSS
</div>
<div class="column">
JS
</div>
</div>
</body>
</html>
|
Output:
Example 2: In this article we will use stackable and container responsive grid.
HTML
<!DOCTYPE html><html lang="en">
<head>
<title>Semantic-UI Responsive Grid</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<div class="ui green header">GeeksforGeeks</div>
<strong>Semantic-UI Menu Content</strong>
</center>
<strong>Stackable:</strong>
<div class="ui stackable four column grid">
<div class="column">HTML</div>
<div class="column">CSS</div>
<div class="column">JS</div>
<div class="column">PHP</div>
</div>
<strong>Container:</strong>
<div class="ui grid container">
<div class="four wide column">HTML</div>
<div class="four wide column">CSS</div>
<div class="four wide column">JS</div>
<div class="four wide column">PHP</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/collections/grid.html