Skip to content
Related Articles

Related Articles

How to Specify Divider gap in Square Grid using Bootstrap ?
  • Difficulty Level : Easy
  • Last Updated : 27 Mar, 2020

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:




    .container {
        grid-column-gap: <line-size>;
        grid-row-gap: <line-size>;
    }

Example:




<!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:
Output for grid-row-gap and grid-column-gap.



An example of grid with 50px gap between rows and 50px gap between column.
Grid-Gap-Output

Browser Compatibility:

    Support in Flex layout:

  • Chrome: No
  • Firefox: Yes (63.0)
  • Edge: No
  • Internet Explorer: No
  • Opera: No
  • Safari: N0
    Support in Grid layout:

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

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :