Open In App

Blaze UI Containers Basic Grid

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we’ll see about Container basic grid in Blaze UI. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc. A grid is a very popular way to create a responsive layout and is very easy to use and flexible. For creating a container basic grid there are two classes used in Blaze UI which are discussed below.

Blaze UI Containers basic grid classes:

  • .o-grid: This class is used to create a grid in Blaze UI.
  • .o-grid__cell: This class is used to create a grid cell in Blaze UI.

Syntax:

<div class="o-container o-container--medium 
   o-grid o-grid--demo">
  <div class="o-grid__cell">
    <div class="o-grid-text">....</div>
  </div>
  
  <div class="o-grid__cell">
    <div class="o-grid-text">....</div>
  </div>
  
  <div class="o-grid__cell">
    <div class="o-grid-text">....</div>
  </div>
</div>

Example 1: Below example demonstrates the basic grid in a container.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
/>
</head>
  
<body>
    <div class="u-centered">
        <h1 style="color: green">GeeksforGeeks</h1>
        <h2>Container Basic Grid in Blaze UI</h2>
    </div>
  
    <div class="o-container o-container--xlarge
               o-grid o-grid--demo">
        <div class="o-grid__cell" 
             style="background-color: aqua;">
            <div class="o-grid-text">Courses</div>
        </div>
  
        <div class="o-grid__cell" 
             style="background-color: yellow;">
            <div class="o-grid-text">Jobs</div>
        </div>
  
        <div class="o-grid__cell" 
             style="background-color: tomato;">
            <div class="o-grid-text">
                  Coding Competitions
              </div>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Containers basic grid

Example 2: Below example demonstrates the basic grid in a container using input and button components.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Blaze UI</title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered">
      <h1 style="color: green">GeeksforGeeks</h1>
      <h2>Container Basic Grid in Blaze UI</h2>
    </div>
  
    <div class="o-container o-container--xlarge 
                o-grid o-grid--demo">
        <div class="o-grid__cell" style=
             "background-color: tomato; padding: 10px;">
          <h2 class="o-grid-text">Email</h2>
          <input class="c-field" placeholder=
                 "Enter your Email" type="text" />
        </div>
  
        <div class="o-grid__cell" style=
             "background-color: lightgreen; padding: 10px;">
          <h2 class="o-grid-text">Password</h2>
          <input class="c-field" placeholder=
                 "Enter your password" type="password" />
        </div>
  
        <div class="o-grid__cell o-grid--bottom" 
          style="background-color: lightcyan; padding: 10px;">
          <h2 class="o-grid-text">Sign Up</h2>
          <button type="button" class="c-button c-button--rounded 
            c-button--ghost c-button--success">
            Sign Up
          </button>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Containers basic grid

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



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