Tailwind CSS
/Beginner
Gap Utilities
Definition
Utilities for controlling gutters between grid and flexbox items.
Explain Like I'm New
The greatest invention in CSS history. Instead of applying `margin-right` to every item in a list and then using complex math to remove the margin from the final item, you just apply `gap-4` to the PARENT container. It automatically puts 16px of space *between* every child.
Real World Example
Putting exactly 1rem of space between a row of 5 social media icons.
Common Use Cases
- •Spacing lists
- •Creating grids
- •Form layouts
Interactive Example
Interview Questions
basic
- Do you apply the `gap` class to the parent container or the child items?
intermediate
- Can you apply different gaps for rows and columns simultaneously?