Grid-area
Place items into regions with grid-area.
grid-area: place an item into a region
After naming regions with grid-template-areas, the grid-area declaration places each item into the chosen region. Example: .panel { grid-area: main; } drops the .panel element into the main region.
The name is written without quotes. If the name exists in grid-template-areas, the item goes there; if not, a new named area is created.
Numeric form: 1 / 1 / 2 / 3
Instead of a region name, you can give four numbers: grid-area: 1 / 1 / 2 / 3. In order, they mean row start / column start / row end / column end; that is grid-row-start / grid-column-start / grid-row-end / grid-column-end.
The numeric form is flexible but hard to read. Prefer a region name whenever possible; reserve the numeric form for auto-generated grids.
Component placement by region
A dashboard grid may have header, side panel, content and footer regions. If you assign each component a region with grid-area, the layout survives HTML reordering.
This approach is the basis of component-driven design. Binding a component to a region adds flexibility when you reorganize code.
Exercise Place the panel into the main region
Place the .panel element into the region named main. Write only the grid-area declaration inside the .panel rule.
Show example solution
.panel {
grid-area: main;
}Test yourself
-
What does grid-area: main do?
.panel { grid-area: main; }- Defines a new region called main
- Selects all elements tagged main
- Renames the page to main
- Places the item into the main region
Show answer
Places the item into the main region — Correct. grid-area: main places the item into the main region.
-
Place the panel into the main region
.panel { grid-area: ____; }Show answer
.panel { grid-area: main; } -
Match each grid-area value to its effect
- grid-area: header
- Goes into the header region
- grid-area: main
- Goes into the main region
- grid-area: 1 / 1 / 2 / 3
- Starts at row 1, column 1
- grid-area: auto
- Automatic placement