Open In App
Related Articles

How to Specify Divider gap in Square Grid using Bootstrap ?

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)

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 16 Mar, 2023
Like Article
Save Article
Similar Reads
Complete Tutorials