Gutters
Gutters are the controlled spaces between grid columns and rows, helping content remain visually separated without adding margins to every child.
Core concept
Explain g-, gx-, and gy- utilities and their responsive forms. Describe how gutters are generated by the row/column system and why a responsive table or card grid may need different horizontal and vertical spacing.
Using it in a real interface
Use g-3 for a card collection, gx-4 for wider horizontal separation, and gy-2 when vertical spacing should remain compact. Explain how gutter size affects perceived density.
Implementation notes
If a row appears to overflow, inspect gutter behavior and parent padding before adding overflow-hidden. Reducing gutters or adjusting the surrounding container is usually a better fix than masking the problem.
ADVERTISEMENT