Blaze UI Grid Fixed widths

Last Updated : 25 Apr, 2022

Blaze UI is Framework-free open source UI toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. It is responsive in nature, as all the components are developed mobile-first and work on any screen size.

Blaze UI Grid is an essential component in any website as it efficiently aligns space and improves the user interface. Blaze UI provides us with a component known as Grid Fixed Width. In this component, the cells in a grid will be fluid and responsive. It allows us to give a fixed width to every cell of the grid.

Blaze UI Grid Fixed width classes:

o-grid: This class is used to create a grid.
o-grid__cell: This class is used to create a cell of the grid.
o-grid-text: This class is used to create a text that is displayed inside a cell.

Syntax:

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

Example 1: In the following program, we will be creating a fixed-width grid.

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"> 
    <title> Blaze UI Fixed Widths</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Fixed Widths 
        </div> 
    </h1> 
    <br> 
  
    <div class="o-grid o-grid--demo"> 
        <div class="o-grid__cell o-grid__cell--width-fixed" 
            style={{width: '350px' }}> 
              
            <!--Fixed Width-->
            <div class="o-grid-text">Width of 350px</div> 
        </div> 
          
        <div class="o-grid__cell o-grid__cell--width-fixed"
            style={{width: '350px' }}> 
            <div class="o-grid-text">Width of 350px</div> 
        </div> 
  
        <div class="o-grid__cell o-grid__cell--width-fixed"
            style={{width: '350px' }}> 
            <div class="o-grid-text">Width of 350px</div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In the following program, we will be demonstrating a grid that does not have a fixed width in order to understand the difference between them.

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"> 
    <title> Blaze UI Fixed Widths</title> 
    <link rel="stylesheet" href= 
  "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Fixed Widths 
        </div> 
    </h1> 
    <br> 
    <div class="o-grid o-grid--demo"> 
        <div class="o-grid__cell"> 
            <!--No fixed width-->
            <div class="o-grid-text">first</div>  
        </div> 
        <div class="o-grid__cell"> 
           <div class="o-grid-text">second</div> 
        </div> 
        <div class="o-grid__cell"> 
           <div class="o-grid-text">third</div> 
        </div> 
    </div> 
</body> 
</html>