Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to Specify Divider gap in Square Grid using Bootstrap ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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. 


  • 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>;



<!DOCTYPE html>
        /*  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;
        Demo to change the divider
        gap in Square grid picture
    <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>


Output for grid-row-gap and grid-column-gap.

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)

My Personal Notes arrow_drop_up
Last Updated : 16 Mar, 2023
Like Article
Save Article
Similar Reads
Related Tutorials