CSS Grid
Grid Placement
Place items by numbered lines, named lines, and spans while keeping the source order meaningful. You will place items with numbered and named lines, spans, negative line numbers, overlapping cells, and source-order safeguards.
Grid placement assigns an item to the space between row and column lines. Those lines may be numbered automatically or given names that describe the layout’s intent.
Named lines make repeated layout rules easier to understand because the stylesheet can refer to content, sidebar, or full instead of unexplained numbers. Spans are useful when an item needs a size rather than a fixed destination, especially in repeated card layouts. This topic also connects with CSS Grid Container and CSS Grid Columns.
Grid items sit between lines
Example
css
.layout {
display: grid;
grid-template-columns:
[full-start] minmax(1rem, 1fr)
[content-start] minmax(0, 65ch)
[content-end] minmax(1rem, 1fr)
[full-end];
}
.layout > * { grid-column: content; }
.layout > .wide { grid-column: full; }Named lines make intent clearer than unexplained numbers. Negative line numbers count backward from the explicit grid’s end.
Span without hard-coding an end line
Example
css
.feature {
grid-column: span 2;
grid-row: auto;
}Overlapping grid items occupy the same cells and can be layered with z-index. As with Flexbox, visual placement must not create a confusing reading order.
Grid Placement Properties
| Property | Purpose | Example |
|---|---|---|
| grid-column | Sets column start and end lines. | grid-column: 1 / 3 |
| grid-row | Sets row start and end lines. | grid-row: 2 / span 2 |
| grid-area | Sets a named area or four placement lines. | grid-area: sidebar |
| place-self | Sets block- and inline-axis alignment for one item. | place-self: center |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid Placement example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.layout {
display: grid;
grid-template-columns:
[full-start] minmax(1rem, 1fr)
[content-start] minmax(0, 65ch)
[content-end] minmax(1rem, 1fr)
[full-end];
}
.layout > * { grid-column: content; }
.layout > .wide { grid-column: full; }
.feature {
grid-column: span 2;
grid-row: auto;
}
</style>
</head>
<body>
<main class="layout"><h1>Content column</h1><p>Ordinary content follows the named content lines.</p><figure class="wide">A full-width figure spans the outer grid lines.</figure><aside class="feature">A feature spans two tracks.</aside></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| grid-area | 57 | 16 | 52 | 10.1 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Named grid lines communicate layout intent while preserving a sensible document order.
Use placement to express visual structure without turning the grid into a second document order. Keyboard navigation and assistive technology normally follow the DOM, so large visual rearrangements can make an otherwise attractive layout confusing to operate.