How to Specify Divider gap in Square Grid using Bootstrap ?

The CSS grid-row-gap property is used to set the size of the gap between the grid row elements. Similarly, the CSS grid-column-gap property is used to set the size of the gap (gutter) between the column elements.

Syntax:

CSS grid-column-gap property

grid-column-gap: none|length|percentage|initial|inherit;

CSS grid-row-gap property

grid-row-gap: length|percentage|global-values;

Approach: It specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

Select the class that includes the grid layout.
Specify the values for grid-gap property of that class.
Example:

HTML

.container {

    grid-column-gap: <line-size>;

    grid-row-gap: <line-size>;
}

Example:

HTML

<!DOCTYPE html>

<html>
 
<head>

    <style>

        /*  Use grid-row-gap and grid-column-gap

            to specify the gap between the square

            grids the gap between the row is

            specified 10px the gap between the

            row is specified 100px */

        .grid-box {

            display: grid;

            grid-template-columns: auto auto auto auto;
 
            /* Specify the divider gap measurement in a grid */

            grid-row-gap: 10px;

            grid-column-gap: 100px;

            background-color: yellow;

            padding: 5px;

        }
 
        .grid-box div {

            background-color: pink;

            text-align: center;

            padding: 15px 0;

            font-size: 25px;

        }

    </style>

</head>
 
<body>
 
    <h1>

        Demo to change the divider

        gap in Square grid picture

    </h1>
 
    <div class="grid-box">

        <div class="item1">gfg</div>

        <div class="item2">gfg</div>

        <div class="item3">gfg</div>

        <div class="item4">gfg</div>

        <div class="item5">gfg</div>

        <div class="item6">gfg</div>

        <div class="item7">gfg</div>

        <div class="item8">gfg</div>

        <div class="item9">gfg</div>

        <div class="item10">gfg</div>

        <div class="item11">gfg</div>

        <div class="item12">gfg</div>

        <div class="item13">gfg</div>

        <div class="item14">gfg</div>

        <div class="item15">gfg</div>

        <div class="item16">gfg</div>

        <div class="item17">gfg</div>

        <div class="item18">gfg</div>

        <div class="item19">gfg</div>

        <div class="item20">gfg</div>

        <div class="item21">gfg</div>

        <div class="item22">gfg</div>

        <div class="item23">gfg</div>

        <div class="item24">gfg</div>

    </div>

</body>
 
</html>

Output:

The grid has 10px gap between rows and 100px gap between columns.

An example of grid with 50px gap between rows and 50px gap between column.

The grid has 50px gap between rows and columns.

Browser Compatibility:

Chrome: No
Firefox: Yes (63.0)
Edge: No
Internet Explorer: No
Opera: No
Safari: No
Chrome: Yes (66.0)
Firefox: Yes (61.0)
Edge: Yes (16.0)
Internet Explorer: No
Opera: Yes (53.0)
Safari: Yes (10.1)

Article Tags :

Bootstrap

CSS

Web Technologies

Bootstrap-Misc