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:

Schematic representation of grid spacing

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

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Grid spacing: the gap property</title> <link href="world.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world"> <div class="land"> <div class="element element--water element--simple">1</div> <div class="element element--grass element--simple">2</div> <div class="element element--rocks element--simple">3</div> <div class="element element--lava element--simple">4</div> <div class="element element--sand element--simple">5</div> </div> </body> </html>

CSS

.land { display: grid; grid-template-columns: auto auto; grid-template-rows: 100px auto 100px; }

Goalscompleted

Assign grid spacing of 10px between grid columns and rows using the gap property for the .land block.

Grid spacing: the gap property

Comments

Log in

Sign up

Restore access