How to Specify Divider gap in Square Grid using Bootstrap ?

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 propertygrid-column-gap: none|length|percentage|initial|inherit;
grid-column-gap: none|length|percentage|initial|inherit;
CSS grid-row-gap propertygrid-row-gap: length|percentage|global-values;
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>;}
.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:
An example of grid with 50px gap between rows and 50px gap between column.
Browser Compatibility:
Chrome: No
Firefox: Yes (63.0)
Edge: No
Internet Explorer: No
Opera: No
Safari: N0
Chrome: Yes (66.0)
Firefox: Yes (61.0)
Edge: Yes (16.0)
Internet Explorer: No
Opera: Yes (53.0)
Safari: Yes (10.1)
Bootstrap-Misc
Picked
Bootstrap
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Types of CSS (Cascading Style Sheet)