Bird
Raised Fist0
CSSmarkup~5 mins

Grid gap in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Grid gap helps you add space between items in a grid layout. It makes your design look neat and easy to read.

When you want to separate boxes or cards in a grid so they don't touch each other.
When creating photo galleries with space between images.
When designing a dashboard with multiple widgets spaced evenly.
When building a product list with gaps between product cards.
When you want consistent spacing without adding margins to each item.
Syntax
CSS
grid-gap: <row-gap> <column-gap>;

/* or use the newer syntax */
gap: <row-gap> <column-gap>;

grid-gap is the older name; gap is the modern, preferred property.

You can set one value for equal row and column gaps, or two values for different spacing.

Examples
Sets equal space of 1rem between rows and columns.
CSS
gap: 1rem;
Sets 1rem space between rows and 2rem space between columns.
CSS
gap: 1rem 2rem;
Older syntax doing the same: 10px row gap and 20px column gap.
CSS
grid-gap: 10px 20px;
Sample Program

This example creates a 3-column grid with 1.5rem space between rows and 2rem space between columns. Each box is blue with white text and rounded corners. The grid container has a light gray background and some padding around it.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid Gap Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem 2rem;
      background-color: #f0f0f0;
      padding: 1rem;
    }
    .grid-item {
      background-color: #4a90e2;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.5rem;
      font-weight: bold;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <main>
    <section class="grid-container" aria-label="Example grid with gaps">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use gap instead of grid-gap for better browser support and future-proof code.

Gap works only if the container has display: grid or display: flex.

Gap values can use any CSS length units like rem, em, px, or percentages.

Summary

Grid gap adds space between grid items easily.

Use gap with one or two values for row and column spacing.

It keeps your layout clean without extra margins on items.

Practice

(1/5)
1. What does the CSS property gap do in a grid layout?
easy
A. It sets the size of grid items.
B. It changes the background color of grid items.
C. It hides grid items from view.
D. It adds space between grid items without extra margins.

Solution

  1. Step 1: Understand the purpose of gap

    The gap property is designed to add space between grid items easily.

  2. Step 2: Compare with other options

    Options A, B, and D describe unrelated effects like size, color, or visibility, which gap does not control.

  3. Final Answer:

    It adds space between grid items without extra margins. -> Option D

  4. Quick Check:

    Grid gap = space between items [OK]
Hint: Remember: gap = space between grid cells [OK]
Common Mistakes:
  • Confusing gap with padding or margin
  • Thinking gap changes item size
  • Assuming gap affects background color
2. Which of the following is the correct syntax to set a 10px gap between rows and 20px gap between columns in a CSS grid?
easy
A. gap: 10px 20px;
B. gap: 20px 10px;
C. gap: 10px;
D. gap: 10px, 20px;

Solution

  1. Step 1: Understand gap syntax with two values

    The first value sets the row gap, the second sets the column gap. So gap: 10px 20px; means 10px row gap and 20px column gap.

  2. Step 2: Check other options for syntax errors or wrong order

    gap: 20px 10px; reverses the order (20px row, 10px column). gap: 10px; sets only one value (both gaps equal). gap: 10px, 20px; uses a comma which is invalid syntax.

  3. Final Answer:

    gap: 10px 20px; -> Option A

  4. Quick Check:

    gap: row column [OK]
Hint: First gap is row, second is column, no commas [OK]
Common Mistakes:
  • Swapping row and column values
  • Using commas between values
  • Using only one value when two are needed
3. Given this CSS code, what is the horizontal space between grid items? 
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px 30px;
  }
medium
A. 15px
B. 30px
C. 45px
D. No gap

Solution

  1. Step 1: Identify gap values meaning

    The first value (15px) is the row gap (vertical space), the second value (30px) is the column gap (horizontal space).

  2. Step 2: Determine horizontal gap

    Horizontal space between grid items is the column gap, which is 30px.

  3. Final Answer:

    30px -> Option B

  4. Quick Check:

    Horizontal gap = second gap value [OK]
Hint: Second gap value = horizontal space [OK]
Common Mistakes:
  • Mixing row and column gap values
  • Adding gap values instead of choosing correct one
  • Ignoring gap property effects
4. What is wrong with this CSS code if the grid items have no space between them? 
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20;
  }
medium
A. The second gap value is missing units.
B. The gap property is misspelled.
C. Grid columns are not defined correctly.
D. Display should be flex, not grid.

Solution

  1. Step 1: Check gap property values

    The gap property has two values: 10px and 20. The second value lacks units (like px), which is invalid.

  2. Step 2: Understand CSS unit requirements

    CSS requires units for length values except zero. Missing units cause the property to be ignored, so no gap appears.

  3. Final Answer:

    The second gap value is missing units. -> Option A

  4. Quick Check:

    All length values need units except zero [OK]
Hint: Always add units (px, em) to gap values except zero [OK]
Common Mistakes:
  • Forgetting units on numeric values
  • Assuming gap works without units
  • Confusing gap with margin or padding
5. You want a grid with 4 columns and 3 rows. You want 1rem gap between rows and 2rem gap between columns. Which CSS code correctly sets this with accessibility and responsive design in mind?
hard
A. .grid { display: flex; gap: 1rem 2rem; flex-wrap: wrap; }
B. .grid { display: grid; grid-template-columns: 4fr; grid-template-rows: 3fr; gap: 1rem 2rem; }
C. @media (min-width: 600px) { .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); gap: 1rem 2rem; } } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; }
D. .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2rem 1rem; }

Solution

  1. Step 1: Check grid structure and gap values

    @media (min-width: 600px) { .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); gap: 1rem 2rem; } } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; } uses 4 columns and 3 rows with correct gap: 1rem row gap, 2rem column gap. It also includes a responsive media query for smaller screens.

  2. Step 2: Evaluate accessibility and responsiveness

    @media (min-width: 600px) { .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); gap: 1rem 2rem; } } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1rem; } adapts layout for smaller screens, improving accessibility and usability. Other options have wrong gap order, wrong display type, or no responsiveness.

  3. Final Answer:

    Code with media query and correct gap values -> Option C

  4. Quick Check:

    Responsive grid with correct gap order [OK]
Hint: Use gap: row column and media queries for responsiveness [OK]
Common Mistakes:
  • Swapping row and column gap values
  • Using flex instead of grid for grid layouts
  • Ignoring responsive design needs