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