Tiếp nối thành công của Flexbox Froggy, Grid Garden đưa lập trình viên đến với thế giới của CSS Grid Layout – công nghệ dàn trang mạnh mẽ nhất trong thiết kế web hiện đại 2 chiều (hàng và cột đồng thời).

Kiến Thức Luyện Tập Trong Game

• Định vị cột và hàng: Sử dụng grid-column-start, grid-column-end và cú pháp rút gọn grid-column: 1 / 4.
• Trải dài lưới: Sử dụng từ khóa span để phần tử bao phủ nhiều ô lưới linh hoạt.
• Thiết lập khuôn mẫu: Làm chủ grid-template-columns, grid-template-rows cùng đơn vị phân số fr và hàm repeat().
• Khoảng cách giữa các ô: Thực hành tối ưu bố cục với thuộc tính gap, grid-gap.