askvity

How to Put a Space Between Two Grids in CSS?

Published in CSS Grid Spacing 4 mins read

Adding space in CSS grid layouts can refer to different scenarios. You might want to add space between the items within a single grid container, or you might need space between two entirely separate grid containers on your page.

This guide explains how to achieve spacing in both contexts, incorporating key CSS properties.

Spacing Between Grid Items Within a Single Grid Container

The most common way to add space between the items inside a single grid container is by using properties designed specifically for this purpose.

Using grid-gap (or gap)

As highlighted in the provided information:

If you want to add space outside the grid item (i.e., between the border and the edges of the grid container), you can use the grid-gap property. This property specifies the size of the gap between rows and columns. Again, you can adjust the value of grid-gap to add more or less space as needed.

The grid-gap property (now standardized as simply gap in modern CSS) is the most direct way to create gutters or spaces between the grid tracks (rows and columns).

  • grid-gap / gap: A shorthand for row-gap and column-gap. You can provide one value (applies to both row and column gaps) or two values (first for row gap, second for column gap).
  • row-gap: Specifies the size of the gap between the grid rows.
  • column-gap: Specifies the size of the gap between the grid columns.

These properties are applied to the grid container, not the grid items.

Examples

/* Apply to the grid container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Example columns */

  /* Using the shorthand 'gap' */
  gap: 20px; /* Adds 20px space between both rows and columns */

  /* Or using grid-gap (older syntax but still supported) */
  /* grid-gap: 20px; */

  /* Or specifying different gaps for rows and columns */
  /* gap: 10px 20px; /* 10px between rows, 20px between columns */

  /* Or using individual properties */
  /* row-gap: 15px; */
  /* column-gap: 30px; */
}

.grid-item {
  /* Styles for grid items */
  background-color: lightblue;
  padding: 15px;
  text-align: center;
}

This method ensures the space is between the items, not adding space around each item that would contribute to the container's padding or item margins.

Spacing Between Two Separate Grid Containers

If you have two completely different HTML elements, both of which are grid containers (or have display: grid), and you want to add space between these two containers, you would use standard CSS box model properties.

The most common property for adding space outside an element's border is margin.

Using margin

Apply margin properties to either the first grid container (bottom margin), the second grid container (top margin), or both.

/* Apply to the first grid container */
.first-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Example grid */
  gap: 10px; /* Spacing within this grid */
  margin-bottom: 30px; /* Adds 30px space below this container */
}

/* Apply to the second grid container */
.second-grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Example grid */
  gap: 5px; /* Spacing within this grid */
  margin-top: 30px; /* Adds 30px space above this container */
}

You can use margin properties (margin-top, margin-bottom, margin-left, margin-right, or the margin shorthand) just as you would with any other block-level elements.

Comparison Table: gap vs. margin

Understanding the context helps you choose the correct property:

Property Applied To Purpose Affects
gap (grid-gap) Grid Container Space between grid items (rows/columns) Gutters within a single grid
margin Any Element Space outside an element's border Space between that element and others around it

In summary, use gap (or grid-gap) for spacing within a single grid container, and use margin for spacing between distinct elements, including separate grid containers.

Related Articles