Grid Placements & Gaps
What is Grid Placement?
Imagine a city map divided by grid lines. If you want to build a large shopping mall, you might specify that it spans from "1st Avenue" to "3rd Avenue" horizontally, taking up two blocks.In CSS Grid, the spaces between columns and rows are defined by grid lines (starting from 1 at the far left/top edge). You can place any grid item into a specific coordinate area by telling it which grid lines to start and stop at:
grid-column: [start-line] / [end-line];grid-column: 1 / 3; instructs the item to start at grid line 1 and stretch/span to grid line 3 (covering two columns).Why does it matter?
Grid placement gives you absolute control over element sizes within your grid. You can make featured blog posts span across multiple columns, or force an advertisement card to span vertically across three rows, creating dynamic, eye-catching grid patterns.Syntax Breakdown
grid-column: 1 / 3; — Spans a grid item across the first two columns.grid-column: span 2; — Alternative shorthand instructing the item to span across 2 columns from its current position.Common Mistakes
Quick Reference
grid-column — Specifies start and end column grid lines.grid-row — Specifies start and end row grid lines.span N — Keyword to stretch across N slots.Your Task
Set the `grid-column` property of the `.span-item` class to `1 / 3` so it spans across the first two grid columns.
index.html
Type code above to start the lesson.
Live Preview