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/css@x.x.x/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:

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= 
"https://unpkg.com/@blaze/css@x.x.x/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>