Open In App

Blaze UI Grid Offsets

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is an open-source CSS framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. 

Blaze UI containers provide a media screen of different widths to put the content inside it according to different requirements. Use the o-grid__cell–offset-xx class to push a cell horizontally across the grid. 

Blaze UI Containers offsets classes:

  • .o-grid__cell–offset-xx: This class is used to set the offset of the container grid. In this class, xx represents the size of the container width.

Syntax:

<div class="o-grid o-grid--demo">
  ...
  <div class="o-grid__cell o-grid__cell--width-xx 
      o-grid__cell--offset-xx">
    ...
  </div>
</div>

Example: The following code demonstrates the o-grid__cell–offset-xx class using offset as 40.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
    <style>
        .o-container {
            margin: 0 40px;
        }
        .o-grid {
            border: 1px solid green;
        }
        .o-grid__cell {
            border: 1px solid blue;
        }
    </style>
</head>
  
<body>
    <h1 style="text-align:center; color:green;">
        GeeksforGeeks
    </h1>
  
    <h2 style="text-align: center;">
        Blaze UI Containers Offsets
    </h2>
  
    <div class="o-grid o-container">
        <div class="o-grid__cell o-grid__cell--width-30">
            <div class="o-grid-text">
                GeeksforGeeks is a portal for geeks.
                It is a place where you can learn,
                share and get help from other geeks.
                Find various things on the portal
                like Jobs, Hackathons, Programming
                Competitions, Coding Questions, etc.
            </div>
        </div>
        <div class="o-grid__cell o-grid__cell--width-30 
            o-grid__cell--offset-40">
            <div class="o-grid-text">
                GeeksforGeeks is a portal for geeks.
                It is a place where you can learn,
                share and get help from other geeks.
                Find various things on the portal
                like Jobs, Hackathons, Programming
                Competitions, Coding Questions, etc.
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://www.blazeui.com/objects/grid



Last Updated : 10 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads