💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 2025年3月1日

Bố cục dạng thẻ (Card Layout)

📌

Kết luận

Kết hợp Grid và CSS để tạo bố cục thẻ bài (Card Layout) hoàn chỉnh

📝 Mã thực tế tại đây

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { padding: 16px; border: 1px solid #ccc; border-radius: 8px; }

Các thành phần của một Card UI

- Card Layout = Grid + border + padding + border-radius - Dùng repeat(3, 1fr) là cách viết ngắn gọn cho 3 cột bằng nhau

Hãy thử xếp 3 thẻ bài nằm ngang bằng Grid nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

■ Bài tập thực hành

Tạo 3 thẻ bài nằm ngang bằng Grid, mỗi thẻ có padding và border.

Gợi ý khi gặp khó khăn

grid-template-columns: repeat(3, 1fr)