Thẻ và thư viện ảnh

Xem này: một thẻ (card)

Thẻ là hình chữ nhật trắng có bóng, gom ảnh và chữ lại. Bạn thấy chúng trên YouTube, Netflix và shop online. Thẻ chỉ là hộp với vài thuộc tính:

<div class="card">
  <img src="images/photo.jpg" alt="Photo description">
  <h3>Card heading</h3>
  <p>Short text for the card.</p>
</div>

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Hai điều mới:

• <div> là hộp trống không có nghĩa riêng – chỉ “gói” những thứ thuộc về nhau.
• box-shadow là bóng: các số nghĩa dịch phải, dịch xuống, mờ, và màu (ở đây đen 10% độ mờ). Bóng biến hình chữ nhật phẳng thành thẻ.

Xem này: thẻ cạnh nhau

Giờ đến mẹo bạn đã biết – flexbox. Bọc thẻ trong hộp và đặt flex:

<div class="cards">
  <div class="card">…</div>
  <div class="card">…</div>
  <div class="card">…</div>
</div>

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;             /* cards fairly share the available space */
  min-width: 200px;    /* but none will ever be narrower than 200px */
}

flex-wrap: wrap + min-width = trên máy tính thẻ cạnh nhau, trên điện thoại xếp chồng. Bạn vừa xây website responsive – tự điều chỉnh theo mọi màn hình.

Lượt của bạn 💪

Thêm phần thẻ vào website – ít nhất ba cái cạnh nhau. Nội dung tùy dự án:

<h2>Our Teachers</h2>
<div class="cards">
  <div class="card">
    <h3>Ms. Turner</h3>
    <p>4th grade homeroom. Teaches English and art. Loves cats.</p>
  </div>
  <div class="card">
    <h3>Mr. Bennett</h3>
    <p>Math and P.E. Runs the floorball club.</p>
  </div>
  <div class="card">
    <h3>Principal Adams</h3>
    <p>Running the school for 10 years. Plays the piano.</p>
  </div>
</div>

<h2>My Hobbies</h2>
<div class="cards">
  <div class="card">
    <img src="images/soccer.jpg" alt="Me during a match">
    <h3>Soccer</h3>
    <p>I play forward for the youth team. 12 goals this year!</p>
  </div>
  <div class="card">
    <img src="images/minecraft-build.jpg" alt="My castle in Minecraft">
    <h3>Minecraft</h3>
    <p>I build huge castles. This one took a month.</p>
  </div>
  <div class="card">
    <h3>Coding</h3>
    <p>I'm building this very website right now. And this is just the start.</p>
  </div>
</div>

<h2>Our Trips</h2>
<div class="cards">
  <div class="card">
    <img src="images/mountains.jpg" alt="View from the summit">
    <h3>The Mountains</h3>
    <p>A three-day hike. Best part: wild berries and the lookout tower.</p>
  </div>
  <div class="card">
    <img src="images/sea.jpg" alt="A bay in Greece">
    <h3>Greece</h3>
    <p>A week at the beach. We saw dolphins!</p>
  </div>
  <div class="card">
    <img src="images/dc.jpg" alt="View from a monument in Washington, D.C.">
    <h3>Washington, D.C.</h3>
    <p>Museums, monuments, and way too much walking.</p>
  </div>
</div>

<h2>Roster</h2>
<div class="cards">
  <div class="card">
    <h3>Jake · goalkeeper 🧤</h3>
    <p>Team captain. 5 clean sheets this season.</p>
  </div>
  <div class="card">
    <h3>Owen · midfield ⚡</h3>
    <p>Fastest player on the team. 8 assists.</p>
  </div>
  <div class="card">
    <h3>Tom · forward 🎯</h3>
    <p>Top scorer. 14 goals this season.</p>
  </div>
</div>

Cùng CSS cho mọi dự án:

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.cards .card {
  flex: 1;
  min-width: 200px;
}

.card {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Bonus: thư viện ảnh

Có nhiều ảnh? Lưới ảnh còn đơn giản hơn – dùng aspect-ratio và object-fit để giữ cùng kích thước:

<div class="gallery">
  <img src="images/p1.jpg" alt="…">
  <img src="images/p2.jpg" alt="…">
  <img src="images/p3.jpg" alt="…">
  <img src="images/p4.jpg" alt="…">
</div>

.gallery {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gallery img {
  width: 180px;
  aspect-ratio: 1;      /* a square */
  object-fit: cover;    /* the photo fills the square and gets cropped, not squished */
}

Điều cần nhớ từ bài này

• <div> là hộp bọc những thứ thuộc về nhau.
• Thẻ = nền + border-radius + padding + box-shadow.
• Flexbox với flex-wrap và min-width = bố cục hoạt động trên cả máy tính và điện thoại.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung