วาง item ข้ามช่อง
เส้นกริด (grid lines)
คอลัมน์ n ช่องมีเส้น 1 ถึง n+1 · ใช้ grid-column / grid-row ให้ item คร่อมหลายช่อง
.hero {
grid-column: 1 / 3; /* จากเส้น 1 ถึงเส้น 3 = 2 คอลัมน์ */
grid-row: 1 / 2;
}
/* ทางลัด: คร่อม 2 คอลัมน์จากตำแหน่งปัจจุบัน */
.wide {
grid-column: span 2;
}
ใน DevTools แท็บ Layout / Grid overlay จะเห็นเส้นหมายเลข — ใช้ตอนดีบักการวางตำแหน่ง