CSS grid-column grid-row item placement
The most common mistake for people starting with CSS Grid is confusing "column 2" with "line 2", grid numbering does not count columns, it counts the grid lines between them. A 3-column grid has 4 vertical lines numbered 1 to 4, and `grid-column: 1 / 3` means "from line 1 to line 3", meaning the first two columns, not column number 3.
Occupies the first two columns and first two rows, a 2x2 block in the top-left corner.
Works with any number of columns without needing to know the total, because -1 is always the last line.
Percentage is computed against the container's full width. `fr` distributes whatever space is left after fixed-size tracks (px, minmax minimum) are already reserved, which is why `1fr 200px` lets the first column take everything not used by the 200px track, something percentage alone can't express.
It spans 2 columns. The math is always end-line minus start-line: 4 − 2 = 2. It is easy to misread as "columns 2 through 4" (which would sound like 3), which is why `span N` usually avoids that counting mistake.
They visually overlap, CSS Grid does not automatically prevent collisions. HTML order (or z-index) decides which one sits on top. Intentional overlap is a valid technique for layered effects inside the grid.
Yes. CSS Grid automatically creates "implicit tracks" to accommodate items placed beyond the explicit grid. The size of those extra tracks is controlled by `grid-auto-columns` / `grid-auto-rows`, which default to `auto`.
Click an item to select it, drag to move it, or use the corner handle to resize it.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}CSS is generated locally in your browser.