Tạo bố cục lưới 3 cột (3-column layout grid) với CSS

Bố cục 3 cột cổ điển với float, hoặc hiện đại với Flexbox/Grid.

Cách 1: Float (cổ điển)

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body { padding: 1%; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    * { box-sizing: border-box; }
    .left, .right, .center {
      float: left;
      width: 33.33%;
      color: white;
      padding: 20px;
      min-height: 300px;
      text-align: center;
    }
    .left { background-color: tomato; }
    .center { background-color: rgb(166, 71, 255); }
    .right { background-color: teal; }
    .container::after { content: ""; clear: both; display: table; }
  </style>
</head>
<body>
  <h1 style="text-align: center;">Three Column Grid (Float)</h1>
  <div class="container">
    <div class="left"><h1>Cột Trái</h1></div>
    <div class="center"><h1>Cột Giữa</h1></div>
    <div class="right"><h1>Cột Phải</h1></div>
  </div>
</body>
</html>

Cách 2: Flexbox (khuyên dùng)

.container { display: flex; gap: 20px; }
.left, .center, .right { flex: 1; min-width: 0; }
@media (max-width: 768px) { .container { flex-direction: column; } }

Cách 3: CSS Grid (hiện đại nhất)

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .container { grid-template-columns: 1fr; }
}

So sánh