HTML, CSS & the Browser

CSS Grid

Definition

Grid starts from the container, not the content. You declare the tracks up front — grid-template-columns: 200px 1fr 1fr gives a fixed sidebar and two equal columns, where 1fr means one share of the space left over — and items drop into the cells in order. Children can be placed deliberately with grid-column and grid-row, or told to span several tracks with span 2. The gap property sets the gutters, with row-gap and column-gap if the two should differ. The repeat() function and auto-fit together produce the most-used pattern on the modern web: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) fills the row with as many cards as fit and rewraps them as the window changes, with no media query at all.

Why It Matters

The division of labour is the point. Flexbox arranges things along one axis and lets the content decide the sizes; Grid defines a structure in two axes and puts the content into it. A card wall where every card in a row must be the same width, and every row must line up with the rows above, is a Grid job — done with nested flex containers it looks right until one card has a longer title. Page-level layout, dashboards, image walls and anything described as a table of boxes belong to Grid. Rows of controls, a navigation bar, a label beside an icon, a button group: those stay flexbox. Picking correctly saves you the fudge factors — the percentage widths and negative margins that appear when a layout is being forced through the wrong mechanism.

How It Works

Declaring display: grid makes the element a grid container and its direct children grid items. The browser builds the explicit tracks you named, then creates implicit rows as needed for any items that overrun, sized by grid-auto-rows. Placement runs in source order unless an item names its own lines; grid-column: 1 / 3 puts an item from line one to line three, spanning two columns. Named areas are the readable alternative: grid-template-areas takes a small picture of the layout in quotes, and each item claims its patch with grid-area. Sizing functions do the responsive work, with minmax(240px, 1fr) setting a floor and a ceiling for a track. The grid inspector in developer tools draws the line numbers over the page, which is the quickest way to see where an item actually landed.

Real-World Example

A photographer puts a client gallery at kerr-weddings.99helpers.site, originally built as flex rows of three. On a 1280px screen it is fine; at 900px the last row holds two photos stretched to fill the width and the alignment falls apart. Replacing the wrapper with display: grid and repeat(auto-fit, minmax(260px, 1fr)) plus gap: 16px gives four columns on a laptop, two on a tablet and one on a phone, all from one declaration and no breakpoints.

Common Mistakes

✕Using Grid for a row of buttons or a navigation bar — it works, but you end up declaring track sizes for content that should simply size itself, which is flexbox territory
✕Setting widths on the grid items instead of the tracks — the container owns the sizing in Grid, and a width on a child fights the track it was placed in
✕Writing a media query for every column count when repeat(auto-fit, minmax(...)) would have handled all of them — the wrapping is built into the track definition

Related Terms

Flexbox

Flexbox is the CSS layout mode for arranging items along a single axis — a row or a column — and distributing the space left over. You switch it on with display: flex on the parent, and the children become flex items.

Media Query

A media query is a block of CSS that only applies when a condition about the device is true — most often a minimum or maximum viewport width. It is the mechanism behind responsive design, written as @media followed by the condition and a set of rules in braces.

Put a file online in seconds

Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.

Host a file free →