Skip to content
Related Articles

Related Articles

Semantic-UI Responsive Grids

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Jul, 2022
View Discussion
Improve Article
Save Article

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 fives types of Responsive grids as Containers, Stackable, Reverse Order, Doubling and Manual Tweaks. Her 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 sued so the stackable grid will automatically stack rows to a single columns on mobile devices.
  • Reverse Order: It is sued 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 sued 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!