Grid Item
Grid items have their own set of properties — where they sit in the grid, how many tracks they span, and how they align inside their cell.
Item properties
| Property | Purpose | Example |
|---|---|---|
grid-column | Columns the item spans. | 1 / 3 or span 2 |
grid-row | Rows the item spans. | 2 / 4 |
grid-area | Named area or shorthand for row/column. | header |
justify-self | Inline-axis alignment for this item. | start, center |
align-self | Block-axis alignment for this item. | end |
place-self | Shorthand for both. | center |
Span syntax
CSS
/* Item starts at column line 1, ends at column line 4 (spans 3 tracks) */
.featured { grid-column: 1 / 4; }
/* Same idea with `span` — start where you land, span 2 */
.wide { grid-column: span 2; }
/* From column 2 to the last line */
.right { grid-column: 2 / -1; }
Naming areas
CSS
.layout {
display: grid;
grid-template-areas:
"header header"
"side main"
"footer footer";
}
header { grid-area: header; }
aside { grid-area: side; }
main { grid-area: main; }
footer { grid-area: footer; }
Tip: Grid lines start at 1, and
-1 means "the last line". grid-column: 1 / -1 is the easiest way to say "stretch across the whole row".Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>Grid Item</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Stretch this item across all columns to the last grid line.
.banner { grid-column: 1 /
; }
A negative number — the last line.
Discussion
Loading…