Open In App

Semantic-UI Responsive Grids

Last Updated : 18 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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



Previous Article
Next Article

Similar Reads

Pure CSS Responsive Grids
Pure CSS is a free and open-source framework of CSS. CSS Grid Layout is a method designed for the two-dimensional layout of items with rows and columns. It consists of both unresponsive and responsive modules. Responsive design's function is to display the contents of the website automatically across all screen resolutions and sizes, and prevents u
4 min read
Primer CSS Responsive Grids
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, an
3 min read
Semantic-UI Page Grids
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 predefined CSS and jQuery to incorporate different frameworks. A Semantic UI grid is used to harmonize negative space in a layout. Version 1.X of Semantic UI Semantic-UI Page Grids were used
2 min read
Semantic-UI Special Row Grids
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. It makes web pages look amazing and responsive. Semantic UI Grid is used to harmonize negative space in a layout. The grid layout
3 min read
Semantic-UI Nesting Grids
Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website. Semantic-UI Grid is used to h
2 min read
Semantic-UI Varying Grids
Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. Semantic-UI Grid is used to harmonize t
3 min read
How to align objects vertically when working with grids in CSS ?
CSS grid layout is one of the strongest layout of CSS. The grid layout is 2-D which means it can handle both rows and columns, unlike flexbox which is 1-D. To align objects apply CSS to the parent element which becomes the grid container and the element's child which becomes the items in the grid. Approach: Use the align-content property of CSS gri
2 min read
Materialize CSS Grids
There are 12 standard columns fluid responsive grid systems that helps you to layout your page in an ordered and easy way. It uses the row and column style classes to define rows and columns respectively. Rows are used to specify a padding-less container to be used for responsive columns and col are used to specify a column with sub-classes. There
3 min read
Pure CSS Grids on Mobile
Pure CSS is a free and open-source CSS framework. It is a set of resources for building dynamic websites and online applications. This was created by Yahoo and is used to create websites that load more quickly, have a better user experience, and look better. It effectively takes the place of Bootstrap. The responsive design was considered when crea
4 min read
Pure CSS Grids
While creating a genuine responsive website layout the grid system is a crucial tool for web developers. A grid is a set of classes that helps us to divide the width of the screen or display into smaller units and make the website look responsive on various devices. Pure.CSS also comes up with such a grid system. Pure CSS Grids Classes: Grid Classe
4 min read