Trình tạo CSS đa cột

CSS Multi-Column Layout Là Gì

CSS Multi-column Layout (đặc tả W3C "CSS Multi-column Layout Module Level 1") tự động chảy lại nội dung của một phần tử duy nhất qua hai hoặc nhiều cột: cùng cách ngành in báo và tạp chí đã xử lý văn bản dài trong nhiều thế kỷ. Bạn khai báo bao nhiêu cột bạn muốn (hoặc mỗi cột nên rộng bao nhiêu), và trình duyệt phân phối nội dung từ trên xuống dưới, trái sang phải, cân bằng số dòng để mỗi cột kết thúc ở chiều cao gần như giống nhau. Module này trở thành W3C Candidate Recommendation vào tháng 4 năm 2011 và được phát hành dưới dạng có thể sử dụng trên các trình duyệt giữa Firefox 3.5 (tháng 6/2009) và IE 10 (tháng 10/2012). Nó đã là một tính năng nền tảng web cơ bản trong hơn một thập kỷ. Không giống như Flexbox hay Grid: căn chỉnh các phần tử con riêng biệt vào các vị trí đã biết: bố cục multi-column coi nội dung là một dòng chảy liên tục duy nhất mà trình duyệt cắt thành các cột dựa trên chiều cao có sẵn.

Khi CSS Columns Là Công Cụ Phù Hợp

• Văn bản bài viết dài trên màn hình rộng. Đọc văn bản một cột rộng hơn ~75 ký tự gây căng mắt: tia nhìn của người đọc phải đi quá xa để tìm đầu dòng tiếp theo. Bố cục hai cột chia đôi độ dài dòng trong khi sử dụng cùng không gian dọc, cải thiện đáng kể khả năng đọc trên màn hình rộng.
• Danh sách định nghĩa và glossary. Các danh sách bảng chữ cái dài của các mục ngắn tự nhiên bao quanh thành nhiều cột mà không cần cân bằng thủ công.
• Danh sách liên kết footer. Footer "site map" cổ điển với hàng chục liên kết: danh mục xuống, liên kết ngang: là một phù hợp tự nhiên cho column-count.
• Danh sách tính năng và liệt kê có dấu đầu dòng. Một danh sách tính năng dài sẽ cuộn mãi mãi trong một cột đọc tốt hơn dưới dạng hai hoặc ba.
• Stylesheet in. Bố cục multi-column là một trong số ít các tính năng CSS dịch đẹp đẽ sang in: định dạng mà các tờ báo đã sử dụng từ khi chúng được phát minh.

column-count vs column-width: Sự Phân Biệt Quan Trọng Nhất

Hai cách để chỉ định cột, và lựa chọn quan trọng cho thiết kế responsive. column-count: 3 hard-code ba cột: tại bất kỳ chiều rộng viewport nào, trình duyệt tạo ra chính xác ba cột, trở nên hẹp hơn khi container thu hẹp. Trên điện thoại, ba cột trở thành các sliver mỏng không đọc được. column-width: 250px thay vào đó yêu cầu các cột "rộng ít nhất 250 pixel"; trình duyệt tính toán có bao nhiêu phù hợp trong container và chảy lại tự động khi viewport thay đổi. Màn hình rộng có nhiều cột, màn hình hẹp có ít hoặc một: không có một media query duy nhất. Mẫu kết hợp là thực hành tốt nhất hiện đại: columns: 250px 4 (viết tắt cho column-width cộng column-count) có nghĩa là "các cột rộng 250px, nhưng không bao giờ nhiều hơn 4." Trình duyệt tạo ra 4 cột trên desktop rộng, ít hơn trên tablet, một trên điện thoại: tự động responsive. Hầu hết CSS sản xuất sử dụng dạng kết hợp này vì lợi ích về khả năng phục hồi.

Kiểm Soát Nơi Nội Dung Ngắt

Theo mặc định, trình duyệt ngắt cột ở bất cứ nơi nào nó hạ cánh: đôi khi tách một tiêu đề khỏi đoạn đầu tiên của nó, hoặc cắt một thẻ làm đôi. Thuộc tính CSS break-inside: avoid (CSS Fragmentation Module Level 3) yêu cầu trình duyệt "không tách phần tử này qua các cột": thường được áp dụng cho các thẻ, hình, và bất kỳ nội dung nào nên ở cùng nhau. break-before: column buộc một ngắt cột trước một phần tử, hữu ích cho "bắt đầu mỗi phần trong một cột mới." column-span: all làm cho một tiêu đề hoặc callout trải dài toàn bộ chiều rộng qua tất cả các cột, thoát khỏi luồng cột: điển hình cho tiêu đề bài viết phía trên một thân multi-column.

Bẫy Cần Lưu Ý

Bố cục multi-column có các tương tác tinh tế đáng biết. Thứ tự đọc trên các trình đọc màn hình tuân theo thứ tự DOM, thường giống với thứ tự cột từ trên xuống dưới trực quan: nhưng công nghệ hỗ trợ đôi khi có thể bị nhầm lẫn trên các bố cục phức tạp. Phân trang in với multi-column có thể tạo ra cân bằng cột kỳ lạ qua các page break; kiểm thử với stylesheet in nếu bạn quan tâm đến đầu ra in. Nội dung dài lấp đầy xuống dưới: nếu bạn cho một container multi-column chiều cao cố định ngắn hơn nội dung cần, nội dung sẽ tràn; nếu bạn không hạn chế chiều cao, trình duyệt cân bằng các cột về chiều dài gần như bằng nhau. Nội dung được neo (form, các phần tử tương tác cần ở yên một chỗ) hoạt động kém trong các cột vì người dùng không thể biết phải nhìn ở đâu. Trộn với Grid hoặc Flexbox ở cùng cấp độ tạo ra kết quả không thể đoán trước: chọn một phương pháp bố cục cho mỗi container.

Các thuộc tính CSS được tạo

• column-count, số lượng cột cố định
• column-width, chiều rộng tối thiểu của cột cho các bố cục responsive
• column-gap, khoảng cách giữa các cột
• column-rule, đường trang trí giữa các cột (độ rộng, kiểu, màu)
• column-span, các phần tử trải dài trên tất cả các cột (tiêu đề)