CSS Grid — Complete Interactive Demo

Defining tracks {Định nghĩa tracks}

grid-template-columns đặt chiều rộng cột, grid-template-rows đặt chiều cao hàng, gap là khoảng cách. {grid-template-columns sets column widths, grid-template-rows sets row heights, gap is the gutter.}

The fr unit {Đơn vị fr}

fr = fraction of the leftover space. 1fr 2fr means the second column gets twice the free space of the first. {fr = phần không gian còn lại. 1fr 2fr nghĩa là cột 2 chiếm gấp đôi cột 1.}

Tip: fr chia phần còn lại sau khi trừ các track cố định (px) và gap. {fr divides what's left after fixed tracks and gaps.}

Responsive without media queries {Responsive không cần media query}

repeat(auto-fit, minmax(MIN, 1fr)) tự xếp số cột vừa với chiều rộng. Kéo thanh "container width" để thấy cột tự wrap. {Auto-flows as many columns as fit; drag container width to see wrapping.}

auto-fit thu gọn track rỗng (item giãn rộng); auto-fill giữ track rỗng. {auto-fit collapses empty tracks; auto-fill keeps them.}

grid-template-areas {Vùng đặt tên}

Đặt tên vùng rồi gán item bằng grid-area. ASCII trong CSS = layout bạn nhìn thấy. {Name regions, then place items with grid-area — the CSS literally draws the layout.}

Alignment {Canh chỉnh}

items = canh nội dung trong từng ô (per cell). content = canh cả lưới khi nó nhỏ hơn container. {items aligns content inside each cell; content aligns the whole grid inside the container.}

Item placement {Đặt vị trí item}

Một item có thể kéo dài qua nhiều track bằng line numbers hoặc span. -1 là line cuối cùng. {An item can span tracks via line numbers or span; -1 is the last line.}

Item #1 (xanh lá) nhận các thuộc tính ở trên; các item khác tự chảy quanh nó. {The green item #1 takes the props above; the rest auto-flow around it.}

All grid properties {Tất cả thuộc tính}

Bảng tra cứu đầy đủ — thuộc tính trên container và trên item. {Full reference — properties on the container and on the item.}