Blaze UI Grid Gutters

Last Updated : 09 May, 2022

Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.

Blaze UI Grids are the objects with different sizes and padding and lots of customization that allows the creation of a versatile responsive container for the website. The Blaze’s Grid facilitates the gutter surrounding each grid cell along with having some padding on either side. We can turn it on and off according to our choice.

Blaze UI Grid Gutters Classes:

o-grid–no-gutter: This class can be used to turn off all the gutters for the specific container cells.
o-grid__cell–no-gutter: This class can be used to turn off the gutter for a single or a specific cell.

Syntax:

<div class="o-grid">
  <div class="o-grid__cell">
    <div class="o-grid-text">One</div>
  </div>
  <div class="o-grid__cell o-grid__cell--no-gutter">
    <div class="o-grid-text">Two</div>
  </div>
</div>

Example 1: In the following example, the first grid has a gutter while the second grid doesn’t have a gutter.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
         content="width=device-width,  
                  initial-scale=1.0" /> 
    <title>GeeksforGeeks | BlazeUI</title> 
    <style> 
        .gfg { 
            border-width: 4px; 
            border-style: solid; 
        } 
          
        .gfg div { 
            border-width: 1px; 
            border-style: solid; 
            border-color: greenyellow; 
        } 
    </style> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" 
         style="padding: 1em;"> 
        <center> 
            <div> 
                <h1 style="color: green;">GeeksforGeeks</h1>  
            </div> 
            <strong>Blaze UI Grid Gutters</strong> 
        </center> 
        <div class="o-grid gfg"> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">One</div> 
            </div> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">Two</div> 
            </div> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">Three</div> 
            </div> 
        </div> 
        <br /> 
        <div class="o-grid o-grid--no-gutter gfg"> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">One</div> 
            </div> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">Two</div> 
            </div> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">Three</div> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output

Example 2: In the following example, we can toggle the gutters of the container with a toggle button.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
         content="width=device-width,  
                  initial-scale=1.0" /> 
    <title>GeeksforGeeks | BlazeUI</title> 
    <style> 
        #gfg { 
            border-width: 4px; 
            border-style: solid; 
        } 
          
        #gfg div { 
            border-width: 1px; 
            border-style: solid; 
            border-color: greenyellow; 
        } 
    </style> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
    <script type="module" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> 
    </script> 
    <script nomodule="" src= 
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> 
    </script> 
    <script src= 
"https://code.jquery.com/jquery-3.6.0.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="o-container" 
         style="padding: 1em;"> 
        <center> 
            <div> 
                <h1 style="color: green;">GeeksforGeeks</h1> 
            </div>  
            <strong>Blaze UI Grid Gutters</strong> 
        </center> 
        <div class="o-grid" id="gfg"> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">One</div> 
            </div> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">Two</div> 
            </div> 
            <div class="o-grid__cell"> 
                <div class="o-grid-text">Three</div> 
            </div> 
        </div> 
        <br /> 
        <button class="c-button c-button--brand"
                onclick="toggleGutter()">  
                Toggle Gutter  
        </button> 
    </div> 
    <script> 
        function toggleGutter() { 
            $('#gfg').toggleClass('o-grid--no-gutter') 
        } 
    </script> 
</body> 
</html>