HTML & CSS Interview Question #93

What is the gap property?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

gap defines spacing between rows and columns in Grid and Flexbox layouts without requiring margins on individual children. row-gap and column-gap can be set independently.

Detailed Explanation

gap defines spacing between rows and columns in Grid and Flexbox layouts without requiring margins on individual children. row-gap and column-gap can be set independently.

Using gap often produces cleaner component CSS because spacing belongs to the container and does not require special rules to remove the first or last child's margin.

Code Example

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.grid {
    display: grid;
    gap: 1rem;
}