Mô-đun Bố cục nhiều cột CSS là một công cụ mạnh mẽ cho phép bạn dễ dàng tạo bố cục nhiều cột cho các trang web của mình. Sự gia tăng của thiết kế đáp ứng có nghĩa là điều quan trọng là phải hiểu cách sử dụng mô-đun này.
Bạn có thể sử dụng thuộc tính cột để tạo bố cục linh hoạt và động thích ứng với các kích thước màn hình khác nhau.
Chỉ định số cột, chiều rộng và khoảng cách
Để tạo bố cục nhiều cột thích hợp cho nội dung trang của bạn, bạn nên bắt đầu bằng cách quyết định số cột bạn muốn kéo dài. Một trong những thuộc tính quan trọng nhất trong mô-đun Nhiều cột là số cột thuộc tính mà bạn sử dụng để đặt số lượng cột để chia nội dung thành.
Ví dụ:
.container {
column-count: 3;
}
Bạn cũng có thể chỉ định chiều rộng và khoảng cách của các cột. Bạn có thể đặt giá trị chiều rộng cột bằng bất kỳ đơn vị CSS được hỗ trợ nào như px, emhoặc %.
Nếu như chiều rộng cột được đặt thành tự độngtrình duyệt sẽ tính toán chiều rộng của mỗi cột dựa trên số cột thuộc tính và không gian có sẵn bên trong bố cục của bạn.
Ví dụ, CSS này tuyên bố 3 cột, mỗi cột có chiều rộng là 200 điểm ảnh:
.container {
column-count: 3;
column-width: 200px;
}
Các khoảng cách cột thuộc tính chỉ định khoảng cách hoặc khoảng trắng giữa các cột trong bố cục nhiều cột. Nó sẽ đặt kích thước của các khoảng trống trống giữa các cột liền kề và có thể lấy giá trị độ dài tính bằng pixel, ems hoặc bất kỳ đơn vị được hỗ trợ nào khác.
Ví dụ:
.container {
column-count: 3;
column-gap: 20px;
}
Theo mặc định, giá trị của khoảng cách cột được đặt thành Bình thường. Trình duyệt của bạn chọn giá trị này để đạt được khoảng cách nhất quán giữa các cột trong bố cục của bạn mà vẫn đẹp mắt. Giá trị này cũng có thể khác nhau giữa các trình duyệt và cũng có thể phụ thuộc vào kích thước phông chữ, chiều cao của dòng, thuộc tính vị trí và các thuộc tính bố cục khác của nội dung cột.
Đảm bảo cân bằng các cột
Các cột CSS cố gắng lấp đầy tất cả không gian có sẵn bên trong một bố cục. Điều này đôi khi có thể dẫn đến các cột có chiều cao khác nhau đáng kể, làm cho bố cục trông không đồng đều.
Để cân bằng các cột, bạn nên đảm bảo rằng mỗi cột trong bố cục của bạn có lượng nội dung xấp xỉ như nhau.
Bạn có thể đạt được điều này bằng cách đặt CSS điền cột tài sản để THĂNG BẰNG. Sau đó, một trình duyệt sẽ cố gắng phân phối nội dung đồng đều trên tất cả các cột sao cho chúng có cùng chiều cao.
Các điền cột thuộc tính được đặt thành THĂNG BẰNG theo mặc định, nhưng một giá trị của tự động sẽ thay đổi hành vi này. Sử dụng tự động phân phối nội dung trên các cột dựa trên không gian có sẵn. Điều này có thể dẫn đến khoảng cách không đồng đều giữa các cột và chiều cao cột không đồng đều. Nó thậm chí có thể tạo bố cục với các cột trống.
Đây là một ví dụ về cách sử dụng điền cột để cân bằng các cột trong bố cục nhiều cột:
.multi-column-layout {
column-count: 3;
column-gap: 20px;
column-fill: balance;
}
Trong ví dụ này, chúng tôi có bố cục nhiều cột với ba cột và khoảng cách 20 pixel giữa mỗi cột. Bằng cách thiết lập điền cột tài sản để THĂNG BẰNGchúng tôi đảm bảo rằng nội dung phân bổ đồng đều trên các cột, dẫn đến chiều cao cột cân đối.
Điều quan trọng cần lưu ý là điền cột có thể không hoạt động tốt cho tất cả các bố cục và có thể dẫn đến khoảng cách giữa các cột không đồng đều. Trong những trường hợp như vậy, bạn có thể cần sử dụng JavaScript để cân bằng các cột theo cách thủ công. Hãy nhớ làm theo các phương pháp hay nhất và sử dụng tính năng nâng cao lũy tiến để bạn không phụ thuộc vào JavaScript.
Để tất cả chúng cùng nhau
Bạn có thể tập hợp mọi thứ bạn đã học về cách triển khai bố cục với các cột CSS và sử dụng nó để tạo bố cục kiểu tạp chí.
Đầu tiên, tạo cấu trúc HTML cơ bản. Sử dụng phần tử vùng chứa để bọc nội dung của bạn, sau đó tạo một số phần tử con mà sau đó bạn có thể bố trí trong các cột.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSScolumns.css" />
</head>
<body>
<div class="magazine-layout">
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
<div class="article">
<h2>Article Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.</p>
</div>
</div>
</body>
</html>
Để tạo bố cục kiểu tạp chí bằng mô-đun Nhiều cột CSS, hãy kết hợp số cột, chiều rộng cột, khoảng cách cộtVà điền cột của cải:
.magazine-layout {
column-count: 3;
column-width: 300px;
column-gap: 20px;
column-fill: balance;
}
.article {
background-color: #f8f8f8;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px;
break-inside: avoid-column;
}
Ví dụ này cũng định nghĩa các đột nhập tài sản trên .bài báo lớp với giá trị là cột tránh. Thuộc tính đảm bảo rằng mỗi bài viết nằm trong một cột duy nhất, thay vì chia thành nhiều cột. Đây là bố cục sẽ trông như thế nào:
Sử dụng dự phòng cho các trình duyệt không được hỗ trợ
Điều quan trọng cần lưu ý là số cột thuộc tính không được hỗ trợ trong tất cả các trình duyệt. Các trình duyệt không hỗ trợ số cộtthay vào đó sẽ hiển thị nội dung trong một cột.
Để cung cấp các kiểu dự phòng cho các trình duyệt không được hỗ trợ, bạn có thể sử dụng các truy vấn tính năng như @supports để phát hiện hỗ trợ cho số cột thuộc tính và cung cấp các kiểu thay thế khi thuộc tính không được hỗ trợ.
Ví dụ:
.container {
width: 100%;
}
@supports (column-count: 3) {
.container {
column-count: 3;
}
}
Trong ví dụ này, chúng tôi sử dụng @supports truy vấn tính năng để phát hiện hỗ trợ cho số cột tài sản. Nếu trình duyệt hỗ trợ đếm cột, thùng đựng hàng phần tử sẽ hiển thị trong ba cột. Nếu trình duyệt không hỗ trợ đếm cột, nó sẽ hiển thị nội dung trong một cột bằng cách sử dụng chiều rộng tài sản.
Chia nhỏ nội dung thành các cột
Nhìn chung, các cột CSS cung cấp một cách thiết thực và mạnh mẽ để tạo bố cục nhiều cột linh hoạt và đáp ứng nhanh nhằm nâng cao khả năng sử dụng và trải nghiệm người dùng đối với nội dung web.
Bằng cách sử dụng các cột CSS và JavaScript cùng nhau, bạn có thể tạo các bố cục linh hoạt và phức tạp hơn, thích ứng với các tùy chọn người dùng và kích thước thiết bị khác nhau, giúp nội dung web của bạn dễ tiếp cận và hấp dẫn hơn đối với người dùng.
