# Placing Items: Lines, Spans and Named Areas Put any grid item exactly where you want it, by the numbered lines around its cells or by drawing the whole page as named areas, so a featured photo can fill four cells and a sidebar can sit beside the main content. Journeyman · CSS · Updated November 1, 2026 ## After this lesson you can - Place a grid item between numbered lines with grid-column and grid-row, using a range such as 1 / 3 or span - Lay out a page with grid-template-areas and grid-area ## Key takeaways - The lines between a grid's tracks are numbered from 1. Three columns have four column lines, and -1 is always the last line. - grid-column: 1 / 3 reads "from line 1 to line 3": the item covers two columns. grid-row works the same way for rows. - span 2 means "two tracks wide", counted from wherever the item starts. An item can span rows and columns at once. - grid-template-areas draws the layout as text, one quoted string per row. Each item joins its area with grid-area. - Areas must be rectangles, and every row needs the same number of cells, or the browser ignores the whole drawing. Trail Photo Club picks a photo of the month, and it deserves more than one small square: it should fill a big block in the corner of the gallery. And the club's page needs a header across the top, a sidebar of upcoming hikes on the left, the gallery beside it, and a footer along the bottom. In the last lesson, items took the next empty cell, like cubes filling a tray. This lesson tells an item exactly where to go. It's how every page layout you've seen with a header, a sidebar and a footer is built today. ## The lines between the cells Look at a parking lot from above. The spaces don't have numbers painted in them; the lines between the spaces do the work. A car parks "between line 3 and line 4". A grid has lines too. **Grid lines** are the dividing lines on either side of every track, and the browser numbers them for you, starting at 1 on the left (and at the top, for rows): ```text line 1 line 2 line 3 line 4 | column 1 | column 2 | column 3 | ``` Three columns have four column lines: one before each column, and one more at the far end. The gap, if there is one, sits on the line. A **grid cell** is the space between two neighboring column lines and two neighboring row lines: one pocket. The lines can also be counted from the end, with negative numbers: `-1` is always the last line, `-2` the one before it. Turn on the grid overlay in the developer tools and it shows both numbers on every line. ## grid-column: from line 1 to line 3 To place an item, give it a starting line and an ending line, with a slash between them. `grid-column: 1 / 3` is read "from line 1 to line 3": ```css .featured { grid-column: 1 / 3; grid-row: 1 / 3; } ``` The photo of the month now covers columns 1 and 2, from line 1 to line 3, and rows 1 and 2: four cells, a big square block in the top-left corner. The other photos flow around it into the cells that are still empty. Some placements you'll use often: | Placement | Read | What the item covers in a three-column grid | |---|---|---| | `grid-column: 2 / 4` | from line 2 to line 4 | columns 2 and 3 | | `grid-column: 1 / -1` | from the first line to the last | the whole row, however many columns there are | | `grid-row: 2 / 3` | from row line 2 to row line 3 | row 2 only | | `grid-column: 3` | starting at line 3 | column 3 only (one track is the default) | `grid-column` is a shorthand for two properties, `grid-column-start` and `grid-column-end`, and you may see either form in other people's code. ## span: "this many tracks" Counting lines gets tedious when all you mean is "two columns wide". **span** says how many tracks an item covers, without saying where it starts: ```css .featured { grid-column: span 2; grid-row: span 2; } ``` `span 2` is read "span two". The browser places the item in the next spot where two columns and two rows are free, the way it places any other item, and makes it two tracks wide and two tracks tall. You can mix the two ways: `grid-column: 2 / span 2` means "start at line 2 and cover two columns". Use line numbers when the item must sit in one exact spot, and `span` when it only needs to be bigger. **Try it.** In a three-column gallery of eight photos, give the third photo `grid-column: span 2`. It doesn't fit in the one cell left in row 1, so it moves to row 2. What happens to the empty cell it leaves behind? Turn on the grid overlay and look. ## Drawing a page with grid-template-areas Before building a house, someone draws a floor plan: kitchen here, living room there. `grid-template-areas` (read "grid template areas") lets you draw a page the same way, in text. Each quoted string is one row, and each word in it names one cell: ```css .page { display: grid; grid-template-columns: 16rem 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"; gap: 1rem; } ``` Read it like a picture: the header covers both columns of the top row, the sidebar and the main content share the middle row, and the footer covers the bottom row. A name written in more than one cell makes one **grid area**: a rectangle of cells with that name. `grid-template-rows` (read "grid template rows") works like `grid-template-columns`, but for rows. `auto` makes a row as tall as its content, and the `1fr` gives the middle row all the height that's left, so a short page still has its footer at the bottom of the grid. Then each part of the page joins its area with `grid-area`, using the name without quotes: ```css .page > header { grid-area: header; } .page > aside { grid-area: sidebar; } .page > main { grid-area: main; } .page > footer { grid-area: footer; } ``` ![The Trail Photo Club page drawn as a grid: a header across the top, a sidebar of upcoming hikes on the left, the photo gallery filling the right, and a footer across the bottom, each labeled with its area name](https://fsdtrainingmedia.blob.core.windows.net/public/images/2026/10/713910c15910427dbeeae58b2eb07c5f.webp) ## The rules of the drawing A drawing that breaks a rule is thrown out whole: the browser ignores the declaration, the areas don't exist, and the items looking for them pile up in a narrow extra column at the edge of the grid. When a page suddenly looks scrambled like that, check these: - **Every row has the same number of cells.** `"header header"` and `"sidebar main main"` don't match: two cells and three. - **Every area is a rectangle.** No L shapes, and an area can't appear in two places that don't touch. - **A dot is an empty cell.** `"header header" ". main"` leaves the cell left of `main` empty. Several dots in a row (`...`) still count as one cell. Moving things around is a matter of redrawing. To put the sidebar on the right, swap the words to `"main sidebar"` and swap the column widths to `1fr 16rem`. The HTML doesn't change. That's handy, but keep the page's visual order close to its HTML order: people who move through the page with the Tab key, and screen readers, follow the HTML. **Try it.** Build the club's page: a `
` holding a `
`, an `