Bố cục lưới thẻ

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 27 trên 35.

Lưới thẻ là một kiểu bố cục thích ứng phổ biến, thường dùng trên các trang thương mại điện tử, danh mục sản phẩm hoặc blog. Kiểu bố cục này sắp xếp các mục như sản phẩm, bài viết hoặc hồ sơ thành những thẻ cách đều nhau. Mỗi thẻ thường có một hình ảnh, tiêu đề, một ít văn bản và đôi khi có nút hoặc liên kết.

Bố cục này thường được tạo bằng CSS Grid hoặc Flexbox để số thẻ trên mỗi hàng thay đổi tùy theo kích thước màn hình (ví dụ: 1 cột trên điện thoại, 2 đến 3 cột trên máy tính bảng, 4 cột trở lên trên máy tính để bàn).

Trước tiên, hãy tạo cấu trúc HTML cho danh sách sản phẩm:

<div class="product-grid">
  <div class="product-card">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name</h3>
    <p>$19.99</p>
    <button>Add to Cart</button>
  </div>
  <!-- Thêm thẻ sản phẩm ở đây -->
</div>

Bây giờ, thêm CSS để giao diện thích ứng:

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Dành cho máy tính bảng và màn hình lớn hơn */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Dành cho máy tính để bàn */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
}

Thao tác này tạo một cột trên điện thoại, hai cột trên máy tính bảng và ba cột trên máy tính để bàn.

Thử thách

Dễ

Bạn được cung cấp một trang HTML cho thư viện ảnh du lịch. Nhiệm vụ của bạn là tạo một lưới thẻ đáp ứng, tự điều chỉnh theo các kích thước màn hình khác nhau.

Yêu cầu:

Dùng CSS Grid để bố trí.
Trên điện thoại (màn hình nhỏ), hiển thị 1 thẻ mỗi hàng.
Trên máy tính bảng, hiển thị 2 thẻ mỗi hàng.
Trên máy tính để bàn, hiển thị từ 3 thẻ trở lên mỗi hàng.

Tạo kiểu cho mỗi thẻ với:

Màu nền đẹp
Các góc bo tròn

Mục tiêu: Tạo bố cục thư viện ảnh gọn gàng, hiện đại và đẹp mắt trên mọi kích thước màn hình.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Card Grid Layout</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f9f9f9;
      margin: 0;
      padding: 2rem;
    }

    h1 {
      text-align: center;
      margin-bottom: 2rem;
      color: #333;
    }

    .gallery-grid {
      gap: 1.5rem;
    }

    .card {
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .card:hover {
      transform: scale(1.03);
    }

    .card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .card h3 {
      margin: 0.8rem;
      color: #444;
    }

    .card p {
      margin: 0 0.8rem 1rem;
      font-size: 0.9rem;
      color: #666;
    }

    /* Tablet: 2 columns */
    @media (min-width: 600px) {
      .gallery-grid {
          
      }
    }

    /* Desktop: 3 columns */
    @media (min-width: 900px) {
      .gallery-grid {

      }
    }
  </style>
</head>
<body>
    <h1>Travel Gallery</h1>

    <div class="gallery-grid">
        <div class="card">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" alt="Beach">
          <h3>Sunny Beach</h3>
          <p>Relaxing views of golden sand and turquoise waters.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e" alt="Mountains">
          <h3>Mountain Escape</h3>
          <p>Fresh air and breathtaking peaks for hiking lovers.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg" alt="City Lights">
          <h3>City Lights</h3>
          <p>A bustling city skyline shining bright at night.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/b/be/Hutan_Tangkahan.jpg" alt="Forest">
          <h3>Green Forest</h3>
          <p>Peaceful trails and endless shades of green.</p>
        </div>
    
        <div class="card">
          <img src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Caravan_in_the_desert.jpg" alt="Desert">
          <h3>Desert Adventure</h3>
          <p>Golden dunes stretching far into the horizon.</p>
        </div>
    
        <div class="card">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470" alt="Lake">
          <h3>Crystal Lake</h3>
          <p>Mirror-like reflections surrounded by mountains.</p>
        </div>
    </div>
</body>
</html>