How to Create a Grid Layout Using CSS

When designing a webpage, it is good to leave some space between elements so that they are not too close to each other.

When using the grid layout, you can easily add equal spacing between the grid items instead of micromanaging their individual margin. For example:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
 
  row-gap: 10px;
  column-gap: 20px;
}

As the name suggests, row-gap adds spacing between rows, and column-gap adds spacing between columns.

Alternatively, you may use the shorthand property, gap:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px 20px; /* row-gap column-gap */
}

If you want equal spacing for columns and rows, give a single value:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}