How can I place a grid item across several columns?

Set its grid-column to start at line 1 and span two tracks:

.featured {
  grid-column: 1 / span 2;
}

Here, 1 identifies the starting grid line, and span 2 means the item covers two column tracks from there. [S1]

For a minimal example, assuming you already have a three-column grid container:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.featured {
  grid-column: 1 / span 2;
}

Apply the featured class to the item you want to span. The declaration controls that item’s column placement; it does not tell every other card where to go.

Think of the three columns as spaces between four vertical lines. The lines mark the boundaries; the column tracks are the spaces between them:

line 1       line 2       line 3       line 4
   | column 1 | column 2 | column 3 |
   |<------ featured item ------->|

With grid-column: 1 / span 2, the item begins at line 1 and spans column 1 plus column 2. Its end is at line 3. The span value counts tracks to cover, not the number of boundary lines to move past. This is line-based placement: a grid item can be given a start and end line, or a span count. [S1]

They remain auto-placed. In the default behavior described in the Grid guide, items without explicit positions are considered in source order and placed into available space, filling rows before creating implicit rows when needed. [S2]

For example, assuming the featured card comes first in the HTML and three ordinary cards follow, the first ordinary card may fit in the remaining third column. The next one may go onto the next row, depending on the grid and the space already occupied. The exact result depends on the other items’ placement and spans; the spanning rule alone doesn’t promise a particular arrangement for every card.

If an item doesn’t fit in the available spot because of spans, auto-placement can move it to another available space, potentially leaving a hole. [S2] So look at the rendered grid, rather than assuming the remaining cards will pack into a specific pattern.

First check whether the spanning item starts where you intended and covers the intended number of tracks. Then inspect the other items’ explicit placements: two explicit placements can overlap, and items that have no explicit position follow auto-placement rules. [S1] [S2]

A small test layout is easier to reason about than changing several rules at once. For instance, label cards A–D temporarily and sketch their intended cells. If A spans columns 1–2 on the first row, note that column 3 on that row is the remaining space; then compare the browser’s result with your sketch. If you choose explicit placements for more cards, check each one for unintended overlap. [S1]

Use this checklist while debugging: identify the span, mark the start line, check any other explicit placements, and then observe where the remaining items land. Auto-placement can leave holes when spans affect what fits next. [S2]