Learn how CSS Grid works by tweaking properties and watching the layout update in real time.
You can then apply this code to your website!
Yes, I "vibe coded" this one (don't hold it against me)
Adding display: grid to a parent element turns its children into
grid items. Use the controls below to see how
grid-template-columns, grid-template-rows,
and gap shape the layout.
Grid items can stretch across multiple columns or rows using
grid-column and grid-row.
Select an item below, then change its start line and end span.
grid-template-areas lets you sketch your layout with named
zones. Each name then maps directly to an element via
grid-area. A full stop (.) marks an empty cell.
Control how items sit within their cells with
justify-items (horizontal) and
align-items (vertical).
Use justify-content / align-content to
position the whole grid inside its container.