Skip to content
Related Articles

Related Articles

Blaze UI Grid Gutters

View Discussion
Improve Article
Save Article
  • Last Updated : 09 May, 2022
View Discussion
Improve Article
Save Article

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=
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </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=
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
    <script src=
    </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>


Output

 

Reference: https://www.blazeui.com/objects/grid


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!