CSS Grid

Grid controls rows and columns together. It is suited to page regions, galleries, dashboards, and any layout where items should share track lines.

Define flexible tracks

01.course-grid {
02  display: grid;
03  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
04  gap: 1rem;
05}

minmax() sets track limits. auto-fit creates as many columns as fit, then stretches them to fill the row.

Place named regions

01.page {
02  display: grid;
03  grid-template-columns: 16rem minmax(0, 1fr);
04  grid-template-areas: "sidebar content";
05  gap: 2rem;
06}
07.sidebar { grid-area: sidebar; }
08.content { grid-area: content; }

Named areas make larger compositions readable. minmax(0, 1fr) allows long content to shrink within the available track instead of overflowing.

Align within the grid

justify-items works along the inline axis, align-items along the block axis, and place-items sets both. Individual items can override alignment with justify-self and align-self.

Keep this

Think in tracks, use intrinsic sizing to reduce breakpoints, and choose Grid when rows and columns must coordinate.