Grid Templates and Item Placement

Grid Anatomy

Before we dive into templates, there are a few terms you should be familiar with when we talk about grids.

• Grid cells are the singular units created by the rows and columns.
• Grid lines start from 1 and count the lines dividing grid rows and columns.
• Grid tracks are the "alleys" between lines (where content is placed).
• Grid areas are regions where content can be placed, which may be a single grid cell or a rectangle of multiple grid cells.

Planning Your Grid

A really good technique for figuring out how to set up a grid in CSS is to sketch over a mockup of your design. Drawing straight lines through the mockup can help your figure out how many columns and rows will be needed.

Grid Templates

The template defines how many columns (and optionally rows) the grid should have, how big they should be, and whether they have names that we can refer to later.

Very often you'll only need to set up the columns, and you can let the row count and heights be determined automatically based on the content. Most of the figures on this page do define row heights only for illustration, since there's no actual content in these grids!

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 5em 5em;
}

If you happen to have more items than the number of columns and rows you defined in your template, the grid algorithm will continue adding automatically sized rows or columns until all the elements have been placed on the grid.

Repeat Syntax

If multiple columns or rows are going to be the same size, you can save yourself some typing using the repeat() function. This will pop up again later in the more advanced grid features!

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 5em 5em;
}

Placing Items on The Grid

By default, Grid places one item at a time across each column, wrapping to new rows as needed.

We can let the grid algorithm handle laying out all of our content, or we can explicitly place items on the grid (or both). There are several ways to do this. For whole-page layouts, the ascii method with named areas is probably easiest. For smaller or more abstract grids, you may skip all the naming and just reference grid lines by their numbers. Any method works though, so use whatever makes the most sense to you starting out, and experiment with the others after you've had some practice.

.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 5em 5em;
}

.placed-grid-item {
    /* Specify a starting line and an ending line */
    grid-column-start: 2;
    grid-column-end: 5;

    /* Or start / end shorthand. Don't forget spaces around the forward slash! */
    grid-column: 2 / 5;

    /* Or specify a starting point, and how many rows or columns the item should cover. */
    grid-column: 2 / span 3;
}

.grid-container {
    grid-template-columns: 1fr [banner-start] repeat(3, 1fr) [banner-end] 1fr;
    grid-template-rows: 5em 5em;
}

.placed-grid-item {
    grid-column-start: banner-start;
    grid-column-end: banner-end;
}

.grid-container {
    grid-template-columns: 1fr 4fr;
    grid-template-areas: "header header"
                         "nav    main  "
                         ".      main  "
                         "footer footer";
}

.placed-grid-item {
    grid-area: main;
}

Implicit Naming of Areas and Lines

Grid has one other trick up its sleeve regarding named lines and named areas. When you define a named area (e.g. main), you can also reference its boundary lines using [main-start] and [main-end]. Similarly, if your grid template has lines named [main-start] and [main-end], Grid creates an area called main for you.

This works for both columns and rows. The only catch is you must always use -start and -end when referring to the lines.