- Theory
- Theory
- Comments
Grid spacing: the gap property
In real projects, it often happens that when we create a grid between columns and rows, we need to leave a small gap.
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:
.grid {
gap: 10px;
}The spacing looks like the following:
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 from the inside of the grid.
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 browser support still leaves much to be desired.
- index.html
- style.css
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
- Assign grid spacing of
10pxbetween grid columns and rows using thegapproperty for the.landblock.
Comments