Bí Quyết Bố Cục CSS Cho Căn Chỉnh lưới Cho Cấu Trúc

Tôi đã viết CSS trong nhiều năm. Tôi sử dụng Flexbox và Grid gần như mỗi ngày. Tuy nhiên, tôi vẫn mất hàng giờ cho các bố cục lẽ ra phải hoạt động, nhưng lại không. Điều này không phải vì CSS kém. Mà vì tôi đã tin vào một số điều không đúng sự thật. Đây là những lỗi bố cục CSS tôi đã gặp phải khi xây dựng các dự án thực tế. Các dự án này bao gồm bảng điều khiển, trang đích và bảng quản trị.

Bài viết này sẽ chia sẻ những gì đã giúp tôi khắc phục chúng.

Lỗi #1: Giả định flex: 1 có nghĩa là các cột bằng nhau

Trong một thời gian dài, tôi nghĩ rằng điều này là đủ:

Tôi từng nghĩ rằng:

“Nếu mọi phần tử con đều có flex: 1, chúng sẽ bằng nhau. Xong.”

.card {
  flex: 1;
}

Hóa ra, điều đó không được đảm bảo.

Tôi mong đợi các cột hoàn hảo.

Chúng phải có cùng chiều rộng.

Chúng phải trông giống nhau.

Điều gì thực sự đã xảy ra

Một số thẻ rộng hơn.

Một số thẻ hơi nhỏ hơn.

Thoạt nhìn, nó giống như một lỗi trình duyệt.

Nhưng đó không phải là lỗi trình duyệt.

Flexbox phân phối không gian dựa trên kích thước nội dung.

Nó không chỉ dựa vào phép toán.

Tại sao điều này xảy ra (một cách đơn giản)

flex: 1 là viết tắt của:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

Phần quan trọng là gì?

Flexbox vẫn xem xét kích thước nội dung khi phân phối không gian.

Nếu một thẻ có:

• Nhiều văn bản hơn
• Các nút lớn hơn
• Nhiều khoảng đệm (padding) hơn

Thì nó có thể kết thúc rộng hơn.

Ví dụ thực tế tôi đã gặp

Một phần giá cả.

<div class="row">
  <div class="box">Basic</div>
  <div class="box">Pro Plan</div>
  <div class="box">Enterprise With Support</div>
</div>

.row {
  display: flex;
}

.box {
  flex: 1;
  padding: 20px;
}

Thẻ “Enterprise” luôn trông lớn hơn.

Điều này gây khó chịu về mặt thị giác.

Khách hàng đã nhận thấy ngay lập tức.

Điều gì cuối cùng đã khắc phục nó

Tôi đã ngừng ép buộc các bố cục giống như lưới bằng flexbox.

Tôi đã sử dụng CSS Grid.

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Bây giờ:

• Tất cả các cột đều bằng nhau.
• Khoảng đệm được bao gồm.
• Không có bất ngờ nào.

Đôi khi giải pháp không phải là thêm CSS.

Mà là sử dụng công cụ bố cục phù hợp.

Nhưng Flexbox có thể được sửa, phải không?

Vâng, nó có thể.

.card {
  min-width: 0;
}

Điều này cho phép Flexbox bỏ qua kích thước nội dung.

Nó giữ cho các cột bằng nhau.

Vì vậy, vấn đề không phải là Flexbox không thể làm điều này.

Tại sao tôi vẫn sử dụng Grid ở đây

Với Flexbox:

• Bạn phải nhớ min-width: 0.
• Quên nó một lần, và bố cục sẽ bị hỏng.
• Lỗi chỉ xuất hiện khi nội dung thay đổi.

Với Grid (Tại sao tôi vẫn thích Grid ở đây):

Vấn đề không phải là liệu Flexbox có thể được sửa hay không.

Mà là bạn phải nhớ bao nhiêu để làm cho nó hoạt động đúng.

Với Flexbox:

• Bạn cần biết về min-width: auto.
• Bạn cần nhớ ghi đè nó.
• Bỏ sót một lần, và bố cục lại bị hỏng.
• Lỗi chỉ xuất hiện khi nội dung thay đổi.

Nhưng với Grid:

grid-template-columns: repeat(3, 1fr);

Các cột bằng nhau là mặc định.

• Không có quy tắc phòng thủ.
• Không có hành vi ẩn.

Điều này thực sự nói về các giá trị mặc định và mục đích

Khi tôi thấy mã Grid, tôi ngay lập tức biết:

“Đây là một bố cục với các cột.”

Khi tôi thấy Flexbox, tôi vẫn phải hỏi:

• Đây là căn chỉnh?
• Đây là bố cục?
• Nội dung sẽ ảnh hưởng đến kích thước chứ?

Grid truyền đạt mục đích tốt hơn.

Điều đó quan trọng trong các dự án thực tế.

Đặc biệt khi các bố cục phát triển.

Hoặc khi đồng đội chỉnh sửa mã sau này.

Quy tắc cá nhân của tôi bây giờ

• Grid cho cấu trúc trang và bố cục đa cột.
• Flexbox cho căn chỉnh và các thành phần một chiều.

Flexbox không sai.

Nó chỉ cần nhiều rào chắn hơn.

Lỗi #2: Nghĩ rằng Grid “Quá phức tạp”

Trong một thời gian dài, tôi đã tránh grid cho các bố cục trang.

Tôi nghĩ:

• Quá nhiều dòng.
• Quá nhiều cú pháp.
• Khó bảo trì.

Niềm tin đó đã sai.

Bố cục trang đơn giản với Grid:

Đây là điều tôi hiện đang sử dụng ở mọi nơi:

.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

• Header.
• Content.
• Footer.

Chân trang dính vào cuối mà không cần thủ thuật.

Không có position: fixed.

Không có phép toán flex grow.

Ví dụ bố cục bảng điều khiển thực tế:

Ví dụ này đến thẳng từ một bảng quản trị thực tế.

Những gì tôi cần:

• Thanh bên trái (cố định).
• Nội dung chính (linh hoạt).
• Bảng điều khiển bên phải (tùy chọn).

Grid làm cho nó rõ ràng:

.layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
}

Xong.

Khi màn hình nhỏ hơn thì sao?

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Chỉ một truy vấn phương tiện (media query).

Không chuyển đổi hướng.

Không ghi đè chiều rộng.

Đó là lúc grid thực sự “khớp” với tôi.

Khi tôi vẫn sử dụng Flexbox (và yêu thích nó)

Flexbox không tệ.

Tôi vẫn sử dụng nó mọi lúc.

Đặc biệt cho:

• Các nút.
• Các mục điều hướng.
• Thanh công cụ.
• Các thành phần nhỏ.
• Các bố cục một chiều.

Ví dụ:

.button {
  display: flex;
  align-items: center;
  gap: 8px;
}

Flexbox tỏa sáng khi:

• Bạn quan tâm đến căn chỉnh.
• Bạn chỉ cần một trục.

Grid tỏa sáng khi:

• Bạn quan tâm đến cấu trúc.
• Bạn muốn các bố cục có thể dự đoán được.

Điều này đã dạy tôi

• flex: 1 không đảm bảo các cột bằng nhau.
• Flexbox phản ứng với nội dung nhiều hơn tôi mong đợi.
• Grid không phức tạp, nó rõ ràng.
• Một truy vấn phương tiện grid có thể thay thế nhiều quy tắc flex.
• Chọn công cụ bố cục phù hợp sớm sẽ tiết kiệm hàng giờ sau này.

CSS không phản bội tôi.

Những giả định của tôi đã làm điều đó.

Nếu bạn đang vật lộn với bố cục của mình, hãy tạm dừng và hỏi:

“Tôi đang sử dụng flexbox vì nó quen thuộc hay vì nó đúng?”

Câu hỏi đó đã tự mình tiết kiệm cho tôi rất nhiều thời gian.

Kết luận

Những lỗi này không đến từ việc thiếu kiến thức.

Chúng đến từ việc sử dụng đúng công cụ ở sai chỗ.

Flexbox không bị hỏng.

Nhưng nó không có nghĩa là hoạt động như một lưới.

Grid không phức tạp.

Nhưng nó thực sự rõ ràng hơn khi bạn bắt đầu sử dụng nó cho cấu trúc.

Điều đã thay đổi mọi thứ đối với tôi là sự thay đổi tư duy này:

• Grid cho cấu trúc bố cục.
• Flexbox cho căn chỉnh.

Kể từ khi tôi bắt đầu lựa chọn công cụ theo cách này, CSS của tôi trở nên nhỏ gọn hơn.

Nó cũng dễ dự đoán hơn.

Và dễ bảo trì hơn.

Nếu bố cục của bạn liên tục gây bất ngờ, đừng cố gắng khắc phục nó bằng nhiều quy tắc hơn.

Hãy lùi lại.

Chuyển đổi phương pháp bố cục.

Và để CSS làm những gì nó giỏi nhất.

Thay đổi đơn giản đó đã tiết kiệm cho tôi nhiều thời gian hơn bất kỳ thủ thuật CSS nào khác.

Tham khảo: medium.com