Bố cục thẻ dạng lưới
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 42 trên 43.
Thử thách
DễTạo bố cục đơn giản gồm 2 cột cho các thẻ bằng CSS Grid.
- Các thẻ sẽ hiển thị thành hai cột bằng nhau.
- Cần có một khoảng trống giữa các thẻ.
Tự làm thử
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>
Tất cả bài học trong Thành thạo CSS
1Làm chủ bộ chọn: Kết hợp
Giới thiệuBộ chọn hậu duệBộ chọn conBộ chọn anh em liền kềBộ chọn anh em tổng quátThử thách ôn tập7Xây dựng giao diện với CSS Grid
Cơ bản về GridĐịnh vị phần tử theo hàng của GridCác vùng được đặt tênThử thách ôn tập3Các lớp giả cấu trúc
Các lớp giả cấu trúcChọn phần tử con đầu tiênChọn phần tử con cuối cùngSức mạnh của mẫu: dùng nth-childThử thách ôn tập6Trang đích
Tạo kiểu cho phần đầu trangTạo kiểu cho nútBố cục phầnBố cục thẻThêm các chi tiết hoàn thiện9Thử thách cuối cùng
Làm nổi bật menu đang hoạt độngTô màu xen kẽ các hàng trong bảngHiệu ứng khi di chuột lên nútBố cục thẻ dạng lướiẢnh chính làm mờTự luyện tập: Playground Web