Blaze UI Grid Widths

Last Updated : 26 Apr, 2022

In this article, we’ll see about grid widths 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. The grid allows the users to create a flexible layout with an easy method. The grid can be created of any size and can also be created of full width.

Blaze UI Grid Widths classes:

.o-grid__cell–width-xx: This class is used to apply specific width to your cell and once you add a specific width to one cell then other cells will automatically take up the rest of the space equally. In “xx”, you can add your specific width.
.o-grid–full: This class is used for making the cell of full width.

Syntax:

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

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

Example 1: Below example demonstrates the grid width in Blaze UI.

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>Grid Width in Blaze UI</h2> 
        <h2>.o-grid__cell--width-xx class</h2> 
    </div> 
  
    <div class="o-container o-container--xlarge  
                o-grid o-grid--demo"> 
        <div class="o-grid__cell o-grid__cell--width-40" 
             style="background-color: tomato;"> 
            <div class="o-grid-text">Cell 1</div> 
        </div> 
  
        <div class="o-grid__cell" 
             style="background-color: lightgreen;"> 
            <div class="o-grid-text">Cell 2</div> 
        </div> 
        <div class="o-grid__cell" 
             style="background-color: black;"> 
            <div class="o-grid-text" 
                 style="color: white;">Cell 3</div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Grid Widths

Example 2: Below example demonstrates the full grid width in Blaze UI.

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>Grid Width in Blaze UI</h2> 
        <h3>.o-grid--full class</h3> 
    </div> 
  
    <div class="o-container o-container--xlarge o-grid  
         o-grid--full o-grid--demo"> 
        <div class="o-grid__cell o-grid__cell--width-40" 
             style="background-color: orange; padding: 20px;"> 
            <h2 class="o-grid-text">Premium Job Portal</h2> 
        </div> 
        <div class="o-grid__cell" style="padding: 20px;"> 
            <h2 class="o-grid-text">Coding Competitions</h2> 
        </div> 
        <div class="o-grid__cell" style= 
             "background-color: green; padding: 20px;"> 
            <h2 class="o-grid-text" style="color: white;"> 
                Online courses 
            </h2> 
        </div> 
    </div> 
</body> 
  
</html>