CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. It is the right tool for page-level layouts, card grids, dashboard panels, magazine-style layouts, and any design where you need precise control over the placement of items in both dimensions.
Defining the Grid
Setting display: grid on a container activates Grid layout for its children. The grid structure is defined on the container using two key properties.
grid-template-columns defines the number of columns and their sizes. Values can be fixed pixel widths, flexible fr units (fractional units that share available space), percentages, or minimum and maximum constraints using minmax(). The value 1fr 2fr 1fr creates three columns where the middle column is twice as wide as the outer columns.
grid-template-rows defines row heights using the same syntax. Rows often use auto (fit the row to its content) or a fixed height.
The repeat() function reduces repetition. repeat(3, 1fr) creates three equal-width columns. repeat(auto-fill, minmax(200px, 1fr)) creates as many columns as will fit at a minimum of 200 pixels wide, each growing equally to fill available space. This pattern creates a responsive grid that adapts its column count automatically without media queries.
gap (previously grid-gap) sets the spacing between cells. A single value applies to both row and column gaps. Two values set row gap and column gap separately.
Placing Items
By default, Grid places items in source order, filling cells from left to right and top to bottom.
grid-column: span 2 makes an item span two columns. grid-row: span 3 spans three rows.
Explicit placement with grid-column: 2 / 4 places the item starting at column line 2 and ending at line 4, spanning two columns. Named lines, named areas, and auto-placement work together to build complex layouts.
grid-template-areas provides a visual way to define layout regions using named areas. You assign ASCII-art-like names to cells and then assign items to those areas with grid-area: header.
Using the DevHexLab CSS Grid Generator
Open the tool at /tools/css/css-grid-generator. Add column tracks by clicking to add columns and setting each track's size. Add rows the same way. Set the gap. The visual preview shows the grid. Copy the container CSS and the basic grid-column and grid-row placement values for your items.
Frequently Asked Questions
What is the difference between Grid and Flexbox?
Grid is two-dimensional (rows AND columns). Flexbox is one-dimensional (rows OR columns). They complement each other: use Grid for the overall page layout and Flexbox for the layout of components within cells.
What is the fr unit?
fr stands for fraction of the available space. After fixed-size and content-sized tracks are allocated, the remaining space is divided among the fr-sized tracks in proportion to their fr values.
Can I nest grids?
Yes. A grid item can itself be a grid container. This is how complex nested layouts are built.
Learn Grid and you can build any layout without a CSS framework.