grid-column
Places or spans an item across columns.
Platform under construction
Grid Placement
Grid placement controls where items sit inside the grid. You can span columns, create featured areas and name regions without changing HTML order.
.feature {
grid-column: span 2;
}
Layout
Grid placement turns tracks into composition.
CSS Grid can auto-place items, but you can also place specific items using grid-column, grid-row or grid-template-areas.
Placement is useful for featured cards, dashboard panels, editorial layouts and page shells where some content needs more space.
The danger is creating a visual order that no longer matches the document order. Placement should enhance layout without confusing reading flow.
grid-row
Places or spans an item across rows.
span
Tells an item how many tracks to cover.
areas
Named layout regions that make page shells easier to read.
Visual model
Layout is easier when you can name the relationship.
Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.
grid-column: span 2
A larger card gets more visual weight.
grid-row: span 2
A panel can stretch across rows.
default placement
Other items continue in normal grid flow.
named regions
Page shells can become readable maps.
Examples
Use the layout tool that matches the shape of the problem.
Featured placement
.feature {
grid-column: span 2;
}
@media (max-width: 700px) {
.feature { grid-column: auto; }
}
Desktop placement forced on mobile
.feature { grid-column: 1 / 4; }
.sidebar { grid-column: 4 / 5; grid-row: 1 / 5; }
/* No mobile reset */
Rules that matter
Strong layout CSS stays readable when the screen changes.
Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.
Place for meaning
Give extra space to content that truly deserves visual weight.
Use span for simple emphasis
grid-column: span 2 is often clearer than line numbers.
Reset complex placement on mobile
Desktop compositions rarely fit narrow screens unchanged.
Keep source order readable
Do not turn CSS placement into a reading-order puzzle.
Use areas for page shells
Named areas make header/sidebar/main/footer layouts readable.
Avoid magic line numbers everywhere
Too many exact line placements become hard to maintain.
Production thinking
Layout quality shows up when content stops being perfect.
Why does this matter?
Grid placement lets you design richer layouts without changing semantic HTML for visual reasons.
Accessibility
Visual placement should not confuse keyboard, screen reader or reading order expectations.
Production note
Use named areas for stable page shells and span-based placement for reusable card grids.
SEO note
Semantic source order remains important even when CSS creates a more expressive visual layout.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change .feature to grid-column: 1 / -1.
- Remove the media query and think about mobile behavior.
- Add grid-row: span 2 to one item and judge the composition.
Practice assignment
Do this before moving to the next lesson.
- Create a three-column grid with one featured item.
- Use span placement rather than changing HTML order.
- Add a mobile reset for the placed item.
Try it yourself
Create a featured grid card
Self-check
Before you continue, prove that you understand Grid Placement.
Answer these questions before moving on. If the answer is vague, change the lab layout and inspect the result.
- Can you explain grid-column span?
- Can you use placement without changing HTML order?
- Can you reset desktop placement on mobile?
- Can you decide when named areas are better?
- Can you avoid excessive line-number layout?
Senior audit upgrade
Visual placement must not lie about source order.
Grid can place items almost anywhere. That power should not confuse keyboard order, reading order or content priority.
Dense packing
grid-auto-flow: dense can visually backfill holes but may make visual order harder to predict.
DOM order
Keep important content order in HTML, then use grid for layout expression.
Featured items
Span cards for real hierarchy, not random decoration.