6 min read
2026-02-16
`auto-fill` — creates empty columns if there are few elements
`auto-fit` - stretches elements to full width
Use `grid-template-areas` to visually define the layout. This makes CSS self-documenting.
CSS Subgrid allows child elements to inherit their parent's grid for alignment.
Grid is for page layout, Flexbox is for components inside cells. These technologies complement each other.
The `gap` property replaces the margins between elements and does not create extra margins along the edges.
`grid-column: span 2` combines two columns - useful for headers and banners.
Prevent content overflow with `minmax(0, 1fr)`.
Check how the Grid layout behaves on different screen sizes. Use our Playground to experiment.
See also: Flexbox Playground, Color Picker, CSS Minifier