CSS Grid Gap and Alignment

Grid gaps create consistent gutters; alignment properties place the contents of each grid cell or the complete grid inside its container.

gap is shorthand for row and column gaps. justify-items aligns grid items inside their grid areas along the inline axis, while align-items works along the block axis. place-items combines those two.

justify-content and align-content distribute the grid tracks as a whole if the grid has extra room. These can seem to do nothing when tracks already expand to fill the available container.

Item alignment works within each grid area; content alignment moves the overall set of tracks.

Give horizontal gaps more space than vertical gaps.

HTML

<div class="gapped-grid"><div>A</div><div>B</div><div>C</div><div>D</div></div>

CSS

.gapped-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 22px; row-gap: 8px; max-width: 355px; background: #f1f5f9; padding: 10px; }
.gapped-grid div { padding: 17px; background: #bfdbfe; text-align: center; border-radius: 6px; }

Rendered output

Observe: The horizontal space between columns is visibly wider than the gap between rows.

Make grid items 60px wide so centering within larger tracks is visible.

HTML

<div class="gapped-grid centered"><div>A</div><div>B</div><div>C</div><div>D</div></div>

CSS

.gapped-grid.centered { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; justify-items: center; align-items: center; max-width: 355px; background: #f1f5f9; padding: 10px; }
.gapped-grid.centered div { box-sizing: border-box; width: 60px; height: 52px; display: grid; place-items: center; background: #ccfbf1; border-radius: 6px; }

Rendered output

Observe: The small items sit in the horizontal center of their larger assigned grid tracks.

Item alignment works within each grid area; content alignment moves the overall set of tracks.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• justify-items and justify-content do different jobs; one aligns items inside cells, the other positions tracks.
• Gap adds space between tracks, not around the outside of the grid.

Change justify-items:center to start. Then set align-items:end and adjust the row height so the vertical movement is visible.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Distinguish between gutters, aligning items inside cells and aligning the entire grid.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.