CSSItem được đặt theo đường kẻ (line) của lưới, đánh số từ 1, và đếm ngược bằng số âm.
css
.a { grid-column: 1 / 3; } /* từ line 1 tới line 3 → chiếm 2 cột */
.b { grid-column: 1 / -1; } /* từ đầu tới cuối, bất kể có bao nhiêu cột */
.c { grid-column: span 2; } /* chiếm 2 track, để browser tự chọn chỗ */
.d { grid-row: 2 / span 3; } /* bắt đầu ở hàng 2, chiếm 3 hàng */
/* shorthand cả hai chiều: row-start / column-start / row-end / column-end */
.e { grid-area: 1 / 2 / 3 / 4; }Dùng tên đường kẻ khi bố cục phức tạp — dễ đọc hơn nhiều so với số:
css
.page {
grid-template-columns:
[full-start] 1fr [content-start] min(720px, 100%) [content-end] 1fr [full-end];
}
.prose { grid-column: content; } /* dùng tên vùng ngầm content-start/end */
.hero { grid-column: full-start / full-end; }grid-column: 1 / -1 là mẹo hay dùng nhất: cho một phần tử trải hết chiều ngang mà không cần biết lưới có mấy cột.
Lưu ý 1: số đếm là đường kẻ, không phải ô. Lưới 3 cột có 4 đường kẻ; 1 / 3 chiếm hai cột đầu, không phải ba.
Lưu ý 2: số âm chỉ đếm được trên explicit grid. Với track do grid-auto-rows sinh ngầm, -1 không trỏ tới hàng cuối như mong đợi.