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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    

    • 



Example:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!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> 



















                        chevron_right







                        filter_none








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






    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
SonaliPatel
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.