วิธีสร้าง Responsive Column Cards ด้วย CSS

Column Cards เป็น UI Pattern ที่นิยมสำหรับแสดง Features, Products, Services, Team Members ตัวอย่างนี้สร้างการ์ด 4 ใบเรียงแนวนอนบนเดสก์ท็อป และซ้อนกันแนวตั้งบนมือถือ (≤600px) ใช้ Float + Calc()

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    * { box-sizing: border-box; }
    .card {
      color: white;
      float: left;
      width: calc(25% - 20px);
      padding: 10px;
      border-radius: 10px;
      margin: 10px;
      height: 200px;
    }
    .card p { font-size: 18px; }
    .cardContainer:after {
      content: "";
      display: table;
      clear: both;
    }
    @media screen and (max-width: 600px) {
      .card { width: 100%; }
    }
  </style>
</head>
<body>
  <h1>Responsive column card Example</h1>
  <h2>Resize the screen to see the below cards resize themselves</h2>
  <div class="cardContainer">
    <div class="card" style="background-color:rgb(153, 29, 224);">
      <h2>First card</h2><p>Some text</p>
    </div>
    <div class="card" style="background-color:rgb(12, 126, 120);">
      <h2>Second card</h2><p>Some text</p>
    </div>
    <div class="card" style="background-color:rgb(207, 41, 91);">
      <h2>Third card</h2><p>Some text</p>
    </div>
    <div class="card" style="background-color:rgb(204, 91, 39);">
      <h2>Fourth card</h2><p>Some text</p>
    </div>
  </div>
</body>
</html>

การคำนวณ Width: calc(25% - 20px)

• 25% - 4 ใบต่อแถว (100% / 4)
• - 20px - ลบ Margin ซ้าย+ขวา (10px + 10px) เพื่อไม่ให้หลุดแถว
• box-sizing: border-box - ทำให้ Padding รวมอยู่ใน Width

Modern Approach: CSS Grid (แนะนำ)

.cardContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}
.card {
  border-radius: 10px;
  padding: 20px;
  color: white;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* ไม่ต้องใช้ calc, float, clearfix, media query */

Flexbox Alternative

.cardContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.card {
  flex: 1 1 calc(25% - 20px);
  min-width: 250px;
  max-width: 300px;
  /* ส่วนที่เหลือเหมือนเดิม */
}

การ์ดที่มีเนื้อหาครบถ้วน (Complete Card)

<div class="card">
  <img src="image.jpg" alt="" class="card-image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Description text...</p>
  </div>
  <button class="card-btn">Learn More</button>
</div>

Responsive Breakpoints สำหรับ Cards

Accessibility

• ใช้ Semantic HTML: <article> สำหรับการ์ดแต่ละใบ
• เพิ่ม aria-label หรือ Heading Structure ที่ถูกต้อง
• คอนทราสต์สีพื้นหลัง/ตัวอักษร ต้องผ่าน WCAG AA
• Focus Visible สำหรับ Keyboard Navigation