Grid Lines, Spans and Named Areas
What Is It?
Grid placement properties position items on explicit lines or in named regions. This separates a two-dimensional layout from item source markup.
Properties, Tags and Attributes Explained
grid-row / grid-column: Shorthands for start and end lines; span 2 occupies two tracks.grid-template-areas: Names rectangular regions in a grid template.grid-area: Assigns an item to a named region, or sets row and column start/end positions.grid-template-rows: Defines explicit row sizes.grid-template-columns: Defines explicit column track sizes, such as repeat(2, 1fr).grid-row-start / grid-row-end: Set the first and last row lines for an item.grid-column-start / grid-column-end: Set the first and last column lines for an item.grid-template: Shorthand for explicit rows, columns, and named areas.
Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.
Example 1: Span columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Lines, Spans and Named Areas</title>
<style>
.demo > div { background: #dbeafe; padding: 12px; border: 1px solid #93c5fd; }
.demo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo > div:first-child { grid-column: 1 / span 2; }
</style>
</head>
<body>
<div class="demo"><div>One</div><div>Two</div><div>Three</div></div>
</body>
</html>What you see: The first item spans two columns.
Example 2: Named page regions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Lines, Spans and Named Areas</title>
<style>
.demo { display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "head head" "side main"; gap: 8px; }
header { grid-area: head; }
aside { grid-area: side; }
main { grid-area: main; }
.demo > * { padding: 16px; background: #dbeafe; }
</style>
</head>
<body>
<div class="demo"><header>Header</header><aside>Topics</aside><main>Lesson content</main></div>
</body>
</html>What you see: The header spans both columns above the sidebar and main region.
Example 3: Place an item with the grid-row shorthand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Lines, Spans and Named Areas</title>
<style>
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 60px 60px; gap: 8px; }
.grid > div { background: #dcfce7; padding: 8px; }
.featured { grid-row: 1 / 3; }
</style>
</head>
<body>
<div class="grid"><div class="featured">Two-row item</div><div>Top row</div><div>Bottom row</div></div>
</body>
</html>What you see: grid-row sets start and end lines together. Use it when the whole row span belongs to a single placement rule.
Example 4: Set rows and line longhands
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Lines, Spans and Named Areas</title>
<style>
.grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 60px 90px; gap: 8px; }
.grid > div { background: #dbeafe; padding: 8px; }
.featured { grid-row-start: 1; grid-row-end: 3; grid-column-start: 1; grid-column-end: 2; }
</style>
</head>
<body>
<div class="grid"><div class="featured">Spans both rows</div><div>60px row</div><div>90px row</div></div>
</body>
</html>What you see: The featured item occupies the first column across both explicit rows. Use line longhands when changing just one placement boundary.
Example 5: Read the grid-template shorthand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Lines, Spans and Named Areas</title>
<style>
.grid { display: grid; grid-template: "head head" 50px "side main" 90px / 1fr 2fr; gap: 8px; }
header { grid-area: head; }
aside { grid-area: side; }
main { grid-area: main; }
.grid > * { background: #e0e7ff; padding: 8px; }
</style>
</head>
<body>
<div class="grid"><header>Header</header><aside>Sidebar</aside><main>Content</main></div>
</body>
</html>What you see: Each quoted row has a height; column tracks come after the slash. Use the expanded longhands when the shorthand is harder to maintain.
When and Where to Use It
Use spans for featured gallery tiles and named areas for readable page templates.
Common Mistake or Useful Tip
Named areas must form rectangles. Moving items visually should not make reading or keyboard order confusing.
Try It Yourself
Change the named template to one column for a small-screen version.