How to Make a Grid Item Span Two Columns

To make a grid item cover two columns, give it grid-column: span 2, or grid-column: 1 / span 2 if it should also start at the first column line. The browser does the rest. What deserves attention is what happens around it: the items that come after a wide item, and the row it may be quietly pinned to. Grid playground shows all of it on a real grid as you change it.

Span an item in the playground

1. Start from the default 3 by 3 grid, or set Columns to the count your layout needs. The slider goes from 1 to 8.
2. Open the item settings and pick the item you want to widen in the item picker.
3. Switch its Placement from Auto to Custom. Four sliders appear: Column start, Column span, Row start, Row span.
4. Set Column span to 2. Move Column start to choose which line it begins on. The real grid redraws, and you can watch the items after it reflow.
5. Copy the CSS. The item's rule reads grid-column: 1 / span 2; with whatever start you chose.

The row line you might not want

A Custom item in the playground always gets both properties written, grid-column and grid-row, even if you only touched the column. With the row sliders untouched, that means grid-row: 1 / span 1, which pins the item to the first row. For a hero card that should sit at the top, that is what you want. For the fourth card in a list that you just wanted wider, it is not: the card jumps to row 1 and the cards that were before it flow around it.

If the item should stay in its natural place and only be wider, delete the grid-row line from the copied CSS, and shorten the column rule to grid-column: span 2. Without a start line, the browser places it at the next spot where two free columns sit side by side.

Holes, and how to fill them

Auto-placement walks through the grid in order and never goes back. If the next item needs two columns and only one is left in the current row, it moves to the next row and the leftover cell stays empty. In a three-column card grid with a few wide cards, those holes appear at the ends of rows, and they move every time the content changes.

grid-auto-flow: dense tells the browser to go back and fill earlier holes with later items that fit. The grid looks tidy, but the visual order no longer matches the order in the HTML, which matters for anyone moving through the cards with a keyboard or a screen reader. The playground has no control for it, so if you want it, add it to the container rule by hand and check the tab order afterwards.

Spanning the whole width

For a full-width row, such as a section heading inside a card grid, the line form beats a span count: grid-column: 1 / -1. Negative line numbers count from the end of the explicit grid, so the rule keeps working when the column count changes at another screen size. The playground writes spans as a start plus a count, so swap that in yourself when you copy.

Why lines are numbered the way they are is covered in the background guide. For several placed items working together as a full page, see the holy grail layout. Or open the playground and widen an item.