วิธีสร้าง 4-Column Layout Grid ด้วย CSS

4-Column Grid เป็น Layout พื้นฐานสำหรับ Dashboard, Product Grid, Feature List ตัวอย่างนี้สร้าง 4 คอลัมน์เท่าๆ กัน (25% แต่ละอัน) ใช้ Float Layout พร้อม Clearfix

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

<!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; }
    .first, .second, .third, .fourth {
      float: left; width: 25%; color: white; padding: 10px; height: 500px; text-align: center;
    }
    .first { background-color: tomato; }
    .second { background-color: teal; }
    .third { background-color: rgb(166, 71, 255); }
    .fourth { background-color: rgb(255, 71, 194); }
    .container:after { clear: both; }
  </style>
</head>
<body>
  <h1 style="text-align: center;">Four Column grid example</h1>
  <div class="container">
    <div class="first"><h1>Some text on the first div</h1></div>
    <div class="second"><h1>Some text on the second div</h1></div>
    <div class="third"><h1>Some text on the third div</h1></div>
    <div class="fourth"><h1>Some text on the fourth div</h1></div>
  </div>
</body>
</html>

โครงสร้างพื้นฐาน

• .container - Wrapper ใช้ Clearfix (::after) ล้าง Float
• .first - .fourth - 4 คอลัมน์ Float: left, Width: 25%
• Height: 500px - ความสูงคงที่ (ในจริงควรใช้ min-height หรือ auto)
• Colors: Tomato, Teal, Purple, Pink - แยกสีแต่ละคอลัมน์

Modern CSS Grid Version (แนะนำ)

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
}
.col {
  background: var(--col-color);
  color: white;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

/* Responsive */
@media (max-width: 1024px) {
  .container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .container { grid-template-columns: 1fr; }
}

HTML สำหรับ Grid Version

<div class="container">
  <div class="col" style="--col-color: tomato">First</div>
  <div class="col" style="--col-color: teal">Second</div>
  <div class="col" style="--col-color: rgb(166,71,255)">Third</div>
  <div class="col" style="--col-color: rgb(255,71,194)">Fourth</div>
</div>

Flexbox Version

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.col {
  flex: 1 1 calc(25% - 15px); /* 25% minus gap */
  min-width: 200px;
  /* styles เหมือนเดิม */
}

Auto-Placement กับ repeat(auto-fit, minmax())

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
/* 
  - Auto-fit: จำนวนคอลัมน์ปรับเองตามพื้นที่
  - minmax(250px, 1fr): กว้างขั้นต่ำ 250px, สูงสุดแบ่งเท่าๆ กัน
  - ผลลัพธ์: 4 คอลัมน์บนใหญ่, 2 บนกลาง, 1 บนเล็ก อัตโนมัติ
*/

การเพิ่ม Gap และ Padding อย่างถูกต้อง

Best Practices

• ใช้ gap แทน Margin ระหว่าง Items
• ใช้ min-height แทน height คงที่
• เพิ่ม border-radius และ box-shadow ให้ลักษณะ Card
• Responsive ด้วย auto-fit/minmax ไม่ต้อง Media Query หลายชั้น
• Semantic HTML: ใช้ <section>, <article>, <aside> ตามบริบท