Layout with CSS Grid

In this lesson you'll learn a grid-shaped layout using CSS Grid, so you can understand the difference from Flexbox and choose between them. This is for people searching "CSS Grid usage" or "CSS Grid vs Flexbox."

Using display: grid; lets you arrange elements in a grid (a checkerboard of cells). grid-template-columns specifies the number and width of columns. If Flexbox is good at "arranging things in one direction," Grid is good at building a "grid of rows and columns."

The sample code uses grid-template-columns: repeat(3, 1fr); to build a grid with 3 equal-width columns, automatically arranging six divs into 2 rows of 3 columns. repeat(3, 1fr) means "repeat a column of the same width 3 times" — a handy, concise way to specify column counts.

A common beginner stumbling block is deciding whether to use Flexbox or Grid. As a basic guideline, use Flexbox if you "just want a single row," and Grid if you "want to control both rows and columns." You can even use both at once — a common pattern is Grid for the big outer structure, and Flexbox for the finer arrangement inside it.

Grid is well suited for arranging a heading, photo, and body text in a grid, magazine-layout style. Once you're comfortable choosing between the two, you can put together even complex page designs with less code.