CSS Grid: Defining a 2D Layout Container

Why it exists

Web layout was historically difficult, relying on hacks like tables or floats. CSS Grid was created to provide a native, robust system for two-dimensional layouts—controlling both columns and rows simultaneously—without the limitations and side effects of older methods.

The mental model

Activating display: grid on an element turns it into a "grid container." Imagine laying a sheet of graph paper over this container. The container's direct children become "grid items," which you can then explicitly place onto the grid's cells, rows, or columns. Unlike Flexbox which is primarily for one-dimensional layout, Grid is for two dimensions.

How it works

You define a grid container by setting its display property to grid. Then, you define the structure of the grid using properties like grid-template-columns and grid-template-rows. For example, grid-template-columns: 1fr 1fr 1fr; creates three equal-width columns. The fr unit represents a fraction of the available space. Once the grid is defined, its direct child elements can be placed onto it using properties like grid-column and grid-row.

When to use it

Use CSS Grid for the overall layout of a page, such as creating a classic layout with a header, footer, main content, and sidebars. It's also perfect for component-level layouts that require alignment in both axes, like a complex card or a dashboard widget where items must align both horizontally and vertically.

When not to use it

For simple, one-dimensional layouts, like a row of buttons or a vertical list of items, CSS Flexbox is often simpler and more appropriate. Grid can be overkill if you only need to control layout along a single axis. It is not meant for laying out the content inside a paragraph of text.

One canonical example

To create a simple three-column layout, you would define a container element and set its style to display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;. The repeat(3, 1fr) is a shorthand for 1fr 1fr 1fr, creating three columns that each take up one fraction of the available space. The gap property adds space between the columns and rows. Any direct child div inside this container will automatically flow into the grid cells.