HuntExams Academy
HTML/CSSBeginner#css#flexbox#grid

What is the CSS 'gap' property and how does it simplify spacing in flex/grid layouts?

gap (with row-gap/column-gap) adds consistent spacing between flex or grid items without needing margins on individual children, avoiding extra margin on the last/first item that margin-based spacing required.

Example
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.flex-row { display: flex; gap: 12px; }

Related Questions

1
HTML/CSSBeginner#css#selectors

What is the difference between class selectors and ID selectors, and why avoid IDs for styling?

Open
2
HTML/CSSAdvanced#css#layout-puzzle

How do you build a CSS-only accordion or tab component?

Open
3
HTML/CSSAdvanced#css#grid

What is the 'holy grail' layout and how is it built with Grid?

Open