Blaze UI Containers Basic Grid

Last Updated : 26 Apr, 2022

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=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css"
/>
</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:

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=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css" />
</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>