Đề bài: [Thiết kế Web] Lưới 4 ô bằng nhau không tràn viền

Cần ôn lý thuyết? Đọc bài giảng Buổi 8: Thiết kế bố cục (1): mô hình hộp, kích thước và vị trí — khóa Thiết kế Web

Cho HTML sau (div.grid chứa 4 div.cell). Viết CSS để .grid dùng display: flex; flex-wrap: wrap; mỗi .cell có box-sizing: border-box; width: 25%; height: 80px; border: 2px solid #334155; background: #e2e8f0, sao cho 4 ô nằm khít thành một hàng, tổng chiều rộng đúng 100% dù có border (nhờ border-box).

Thư Mục

root

index.html

style.css

script.js

Chọn một file để chỉnh sửa hoặc tạo file mới

Console

Không có đầu ra