CSS Grid

CSS Grid (CSS Grid Layout) is a CSS system for arranging a page in rows and columns at the same time. You define tracks; items drop into cells, span, or sit in named areas.

It is the sibling of Flexbox. Flexbox is one axis (a row or a column). Grid is two axes — the tool for a homepage, a dashboard, or a gallery that has to hold a header, a sidebar, and a main column without nested flex hacks. Together they power a fluid grid: percentages and fr units instead of a locked pixel canvas. That is how responsive design keeps usability when the screen shrinks.

A real-life example of CSS Grid

A Decatur clinic site: logo and nav on the first row, a sidebar of hours next to the main copy, a three-card services row, footer across the bottom. display: grid and grid-template-areas draw that map. On a phone the same tracks stack — like folding a paper floor plan into a list. Flexbox still lines up the nav links; Grid owns the floor.

Use Grid when the problem is “this page has rows and columns.” Use Flexbox when it is “line these up and let them breathe.” How-to: Fluid Grids in Responsive Design and Why Your Website Needs Responsive Design. Practice: Grid Garden.