Bài Giảng CSS 2: Chia Khung Theo Kích Thước, Cột, Grid

1. Giới Thiệu

Trong CSS, việc chia bố cục (layout) là một yếu tố quan trọng để xây dựng các giao diện web hiện đại. Chúng ta có thể chia layout theo nhiều cách như dùng width/height, float, flexbox và grid.

1.1. Kích thước

• width: Xác định chiều rộng của phần tử. Giá trị có thể là px, %, vw, auto, min-content, max-content.
• height: Xác định chiều cao của phần tử. Giá trị có thể là px, %, vh, auto, min-content, max-content.

1.2. Float Layout

• float: Đẩy phần tử sang trái (left) hoặc phải (right). Các giá trị: none, left, right, inherit.
• clear: Ngăn chặn phần tử bị đẩy lên bởi float. Các giá trị: none, left, right, both.
• overflow: Kiểm soát hiển thị nội dung vượt quá kích thước. Các giá trị: visible, hidden, scroll, auto, clip.

1.3. Flexbox Layout

• display: flex: Kích hoạt flexbox trên phần tử cha.
• flex: Xác định kích thước linh hoạt của phần tử con. Các giá trị:
  • flex: 1 (chia đều không gian còn lại).
  • flex: 2 (chiếm gấp đôi phần tử có flex: 1).
  • flex: none (không co giãn).
• justify-content: Căn chỉnh theo chiều ngang. Các giá trị:
  • flex-start (căn trái).
  • center (căn giữa).
  • flex-end (căn phải).
  • space-between (chia đều, hai phần tử ngoài cùng sát mép).
  • space-around (chia đều, có khoảng cách xung quanh).
  • space-evenly (khoảng cách bằng nhau giữa các phần tử).
• align-items: Căn chỉnh theo chiều dọc. Các giá trị:
  • flex-start (căn trên).
  • center (căn giữa).
  • flex-end (căn dưới).
  • stretch (giãn đều nếu không có chiều cao cố định).
  • baseline (căn theo dòng chữ).
• gap: Khoảng cách giữa các phần tử con.

1.4. Grid Layout

• display: grid: Kích hoạt grid trên phần tử cha.
• grid-template-columns: Xác định số cột. Các giá trị phổ biến:
  • repeat(3, 1fr) (chia thành 3 cột bằng nhau).
  • 100px 1fr 2fr (cột 1: 100px, cột 2: bằng cột 3 nhưng nhỏ hơn).
• grid-template-rows: Xác định số hàng. Ví dụ: repeat(2, auto) (2 hàng, chiều cao tự động).
• grid-gap (hoặc gap): Khoảng cách giữa các ô trong grid.

1.5. Hộp và căn chỉnh

• box-sizing: Quy định cách tính kích thước.
  • content-box (chỉ tính phần nội dung, không gồm padding và border).
  • border-box (bao gồm cả padding và border).
• padding: Khoảng cách giữa nội dung và viền ngoài. Ví dụ: padding: 10px 20px 15px 5px (trên, phải, dưới, trái).
• margin: Khoảng cách giữa các phần tử. Có thể dùng auto để căn giữa ngang.
• text-align: Căn chỉnh nội dung văn bản. Các giá trị: left, center, right, justify.
• line-height: Độ cao của dòng chữ. Ví dụ: 1.5 (gấp 1.5 lần kích thước chữ).
• vertical-align: Căn chỉnh phần tử inline theo trục dọc. Các giá trị: baseline, top, middle, bottom.

2. Chia Layout Theo Kích Thước

2.1. Sử Dụng Width và Height
 

Ưu điểm:

• Dễ dàng kiểm soát kích thước phần tử.

• Không bị ảnh hưởng bởi nội dung bên trong.

Nhược điểm:

• Không phản hồi tốt trên các màn hình có kích thước khác nhau.

• Nếu nội dung thay đổi, có thể gây tràn hoặc không đủ không gian hiển thị.

Nên dùng khi nào:

• Khi cần đảm bảo một phần tử có kích thước cố định trên giao diện.

Ví dụ:

<div class="box">Hộp có kích thước cố định</div>

.box {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    text-align: center;
    line-height: 200px;
    border: 1px solid black;
}

3. Chia Cột Bằng Float

Ưu điểm, nhược điểm và khi nào nên dùng:

• Ưu điểm: Tương thích tốt với trình duyệt cũ, dễ hiểu.

• Nhược điểm: Cần dùng clear để tránh lỗi, khó kiểm soát căn chỉnh.

• Nên dùng khi nào: Khi làm bố cục đơn giản.

Ví dụ:

<div class="container">
    <div class="left">Cột trái</div>
    <div class="right">Cột phải</div>
</div>

.container {
    width: 100%;
    overflow: hidden;
}
.left {
    float: left;
    width: 50%;
    background-color: lightgreen;
    padding: 20px;
    box-sizing: border-box;
}
.right {
    float: right;
    width: 50%;
    background-color: lightcoral;
    padding: 20px;
    box-sizing: border-box;
}

4. Chia 12 cột thông dụng

Hệ thống 12 cột giúp chia bố cục linh hoạt bằng cách sử dụng width theo phần trăm.
Mỗi cột trong hệ thống 12 cột chiếm 8.33% chiều rộng (100% / 12 = 8.33%).

📌 Công thức tính chiều rộng của một cột:

.column-x {
    width: calc(8.33% * x); /* x là số cột */
}

🚀 Ví dụ:

• .col-1  { width: 8.33%; }
• .col-2  { width: 16.66%; }
• .col-3  { width: 25%; }
• .col-4  { width: 33.33%; }
• .col-5  { width: 41.66%; }
• .col-6  { width: 50%; }
• .col-7  { width: 58.33%; }
• .col-8  { width: 66.66%; }
• .col-9  { width: 75%; }
• .col-10 { width: 83.33%; }
• .col-11 { width: 91.66%; }
• .col-12 { width: 100%; }

Khi sử dụng thì chúng ta chỉ cần gọi lại các class đã có. Ví dụ chia thành 2 phần bằng nhau

<div class="col-12">

            <div class="col-6">Phần 1</div>

            <div class="col-6">Phần 2</div>

</div>
 

5. Chia Cột Bằng Flexbox

Hiện đại, dễ dàng căn chỉnh và co giãn theo hàng hoặc cột.

• Ưu điểm: Linh hoạt, dễ kiểm soát khoảng cách giữa các phần tử.
• Nhược điểm: Không phù hợp cho bố cục phức tạp nhiều hàng và cột.
• Nên dùng khi nào: Khi cần căn chỉnh theo một hướng (hàng hoặc cột) với khoảng cách linh hoạt.

Ví dụ:

<div class="container">
    <div class="box">Cột 1</div>
    <div class="box">Cột 2</div>
    <div class="box">Cột 3</div>
</div>

.container {
    display: flex;
    gap: 10px;
}
.box {
    flex: 1;
    padding: 20px;
    background-color: lightblue;
    text-align: center;
}

Các thành phần chính

• Flex container: phần tử cha dùng display: flex

• Flex items: các phần tử con trực tiếp của container

🔹 Trên container (display: flex):

✅ Ví dụ:

.container {
  display: flex;
  flex-direction: row;         /* mặc định: row */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

🔹 Trên flex item (các phần tử con):

🎯 4. Ví dụ thực tế

<style>
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eee;
    padding: 10px;
  }

  .item {
    background: lightblue;
    padding: 20px;
    flex: 1;
    margin: 5px;
    text-align: center;
  }
</style>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

5. Chia Layout Bằng CSS Grid

Hệ thống lưới mạnh mẽ giúp bố cục linh hoạt với hàng và cột.

• Ưu điểm: Phù hợp với bố cục phức tạp, dễ dàng kiểm soát các hàng/cột.
• Nhược điểm: Chưa được hỗ trợ đầy đủ trên một số trình duyệt cũ.
• Nên dùng khi nào: Khi thiết kế bố cục dạng lưới với nhiều hàng và cột.

Ví dụ:

<div class="container">
    <div class="box">Ô 1</div>
    <div class="box">Ô 2</div>
    <div class="box">Ô 3</div>
    <div class="box">Ô 4</div>
    <div class="box">Ô 5</div>
    <div class="box">Ô 6</div>
</div>

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.box {
    background-color: lightgoldenrodyellow;
    padding: 20px;
    text-align: center;
}

6. Kết Luận

Mỗi phương pháp chia layout đều có ưu và nhược điểm. Trong thực tế, flexbox và grid là những phương pháp hiện đại và linh hoạt nhất. Hãy lựa chọn phương pháp phù hợp cho giao diện của bạn!