0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>In real projects, it often happens that when we create a grid between columns and rows, we need to leave a small gap.</p>
1
<p>In real projects, it often happens that when we create a grid between columns and rows, we need to leave a small gap.</p>
2
<p>The developers of the grid specification provided for this possibility, and they therefore included the gap property, which allows us to add uniform spacing immediately between rows and between columns. This property can be defined in px, %, and other units of measurement:</p>
2
<p>The developers of the grid specification provided for this possibility, and they therefore included the gap property, which allows us to add uniform spacing immediately between rows and between columns. This property can be defined in px, %, and other units of measurement:</p>
3
.grid { gap: 10px; }<p>The spacing looks like the following:</p>
3
.grid { gap: 10px; }<p>The spacing looks like the following:</p>
4
<p>One interesting feature of grid spacing is that it does not appear between the edges of the container and the edge elements. That is, these are the empty spaces between the elements, and they only appear<em>from the inside</em>of the grid.</p>
4
<p>One interesting feature of grid spacing is that it does not appear between the edges of the container and the edge elements. That is, these are the empty spaces between the elements, and they only appear<em>from the inside</em>of the grid.</p>
5
<p>The gap property was initially named grid-gap, but it was subsequently renamed. This happened because it became possible to use it not only with grids, but also with flexboxes and columns. We must admit: in these cases<a>browser support</a>still leaves much to be desired.</p>
5
<p>The gap property was initially named grid-gap, but it was subsequently renamed. This happened because it became possible to use it not only with grids, but also with flexboxes and columns. We must admit: in these cases<a>browser support</a>still leaves much to be desired.</p>