Trong nhiều năm, CSS float là một thành phần phức tạp nhưng cần thiết trong việc tạo bố cục trang web. Nếu thiết kế của bạn yêu cầu nhiều cột, bạn đã chuyển sang số nổi. Vấn đề với phương pháp này là, bất chấp sự khéo léo đáng kinh ngạc mà các nhà thiết kế/nhà phát triển web đã thể hiện trong việc tạo bố cục trang web phức tạp, CSS float chưa bao giờ thực sự được sử dụng theo cách này.
Trong khi định vị CSS và float chắc chắn sẽ có một vị trí trong thiết kế web trong nhiều năm tới, các kỹ thuật bố cục mới hơn bao gồm CSS Grid và Flexbox hiện đang cung cấp cho các nhà thiết kế web những cách mới để tạo bố cục trang web của họ. Một kỹ thuật bố cục mới khác cho thấy nhiều tiềm năng là CSS Multiple Columns.
Các cột CSS đã xuất hiện được vài năm nhưng việc thiếu hỗ trợ trong các trình duyệt cũ hơn (chủ yếu là các phiên bản Internet Explorer cũ hơn) đã khiến nhiều chuyên gia web không thể sử dụng các kiểu này trong công việc sản xuất của họ.
Với sự kết thúc hỗ trợ cho các phiên bản IE cũ hơn, một số nhà thiết kế web hiện đang thử nghiệm các tùy chọn bố cục CSS mới, bao gồm cả Cột CSS và nhận thấy rằng họ có nhiều quyền kiểm soát hơn với các phương pháp mới này so với cách họ đã làm với float.
Đúng như tên gọi của nó, CSS Multiple Columns (còn được gọi là bố cục nhiều cột CSS3) cho phép bạn chia nội dung thành một số cột nhất định. Các thuộc tính CSS cơ bản nhất mà bạn sẽ sử dụng là:
- số cột
- khoảng cách cột
Đối với số lượng cột, bạn chỉ định số lượng cột bạn muốn. Khoảng cách giữa các cột sẽ là các rãnh hoặc khoảng cách giữa các cột đó. Trình duyệt sẽ lấy các giá trị này và chia đều nội dung thành số cột mà bạn chỉ định.
Một ví dụ phổ biến về CSS nhiều cột trong thực tế là chia một khối nội dung văn bản thành nhiều cột, tương tự như những gì bạn sẽ thấy trong một bài báo. Giả sử bạn có phần đánh dấu HTML sau (lưu ý rằng đối với các mục đích ví dụ, chúng tôi chỉ đặt phần đầu của một đoạn văn, trong khi trên thực tế, có thể có nhiều đoạn nội dung trong phần đánh dấu này):
Tiêu đề bài viết của bạn
Hãy tưởng tượng rất nhiều đoạn văn bản ở đây …
Nếu sau đó bạn đã viết các kiểu CSS này:
.nội dung {
-moz-column-count: 3;
-webkit-column-count: 3;
số cột: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
khoảng cách cột: 30px;
}
Quy tắc CSS này sẽ chia phần “nội dung” thành 3 cột bằng nhau với khoảng cách 30 pixel giữa chúng. Nếu bạn muốn có hai cột thay vì 3, bạn chỉ cần thay đổi giá trị đó và trình duyệt sẽ tính toán độ rộng mới của các cột đó để chia đều nội dung. Lưu ý rằng chúng tôi sử dụng các thuộc tính có tiền tố của nhà cung cấp trước, sau đó là các khai báo không có tiền tố.
Dễ dàng như vậy, việc sử dụng nó theo cách này là đáng nghi ngờ đối với việc sử dụng trang web. Có, bạn có thể chia một loạt nội dung thành nhiều cột, nhưng đây có thể không phải là trải nghiệm đọc tốt nhất cho web, đặc biệt nếu chiều cao của các cột này nằm dưới “màn hình đầu tiên” của màn hình.
Người đọc sau đó sẽ phải cuộn lên và cuộn xuống để đọc toàn bộ nội dung. Tuy nhiên, nguyên tắc cơ bản của CSS Columns rất dễ dàng như bạn thấy ở đây và nó có thể được sử dụng để làm nhiều việc hơn là chỉ phân chia nội dung của một số đoạn—nó thực sự có thể được sử dụng để bố trí.
Giả sử bạn có một trang web có vùng nội dung có 3 cột nội dung. Đây là một bố cục trang web rất phổ biến và để đạt được 3 cột đó, thông thường bạn sẽ thả nổi các phần có trong đó. Với nhiều cột CSS, điều đó dễ dàng hơn rất nhiều.
Đây là một số HTML mẫu:
Từ Blog của chúng tôi
Nội dung sẽ đi đến đây…
sự kiện sắp tới
Nội dung sẽ đi đến đây…
CSS để tạo nhiều cột này bắt đầu với những gì bạn đã thấy trước đây:
.nội dung {
-moz-column-count: 3;
-webkit-column-count: 3;
số cột: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
khoảng cách cột: 30px;
}
Bây giờ, thách thức ở đây là trình duyệt muốn chia đều nội dung này, vì vậy nếu độ dài nội dung của các phần này khác nhau, trình duyệt đó sẽ thực sự chia nội dung của một phần riêng lẻ, thêm phần đầu của phần đó vào một cột và sau đó tiếp tục thành một phần khác (bạn có thể thấy điều này bằng cách sử dụng mã này để chạy thử nghiệm và thêm các độ dài nội dung khác nhau vào mỗi phần).
Đó không phải là những gì bạn muốn. Bạn muốn mỗi phần trong số này tạo một cột riêng biệt và bất kể nội dung của một phần riêng lẻ lớn hay nhỏ, bạn không bao giờ muốn nó bị tách. Bạn có thể đạt được điều này bằng cách thêm một dòng CSS bổ sung này:
.nội dung div {
hiển thị: khối nội tuyến;
}
Điều này sẽ buộc các phần bên trong “nội dung” vẫn còn nguyên vẹn ngay cả khi trình duyệt chia phần này thành nhiều cột. Thậm chí tốt hơn, vì chúng tôi không cung cấp bất cứ thứ gì ở đây có chiều rộng cố định, các cột này sẽ tự động thay đổi kích thước khi trình duyệt thay đổi kích thước, khiến chúng trở thành một ứng dụng lý tưởng cho các trang web phản hồi. Với kiểu “khối nội tuyến” đó, mỗi phần trong số 3 phần của bạn sẽ là một cột nội dung riêng biệt.
Có một thuộc tính khác ngoài “số cột” mà bạn có thể sử dụng và tùy thuộc vào nhu cầu bố cục của bạn, nó thực sự có thể là lựa chọn tốt hơn cho trang web của bạn. Đây là “chiều rộng cột”. Sử dụng cùng một đánh dấu HTML như được hiển thị trước đó, thay vào đó, chúng ta có thể làm điều này với CSS của mình:
.nội dung {
-moz-column-width: 500px;
-webkit-column-width: 500px;
chiều rộng cột: 500px;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
khoảng cách cột: 30px;
}
.nội dung div {
hiển thị: khối nội tuyến;
}
Cách thức hoạt động của tính năng này là trình duyệt sử dụng “độ rộng cột” này làm giá trị tối đa của cột đó. Vì vậy, nếu cửa sổ trình duyệt rộng dưới 500 pixel, 3 phần này sẽ xuất hiện trong một cột duy nhất, cột này chồng lên cột kia. Đây là bố cục điển hình được sử dụng cho bố cục trên thiết bị di động/màn hình nhỏ.
Khi chiều rộng của trình duyệt tăng lên đủ lớn để vừa với 2 cột cùng với các khoảng cách cột được chỉ định, trình duyệt sẽ tự động chuyển từ bố cục một cột thành hai cột. Tiếp tục tăng chiều rộng màn hình và cuối cùng, bạn sẽ nhận được thiết kế 3 cột, với mỗi 3 phần của chúng tôi được hiển thị trong cột riêng của chúng. Một lần nữa, đây là một cách tuyệt vời để có được một số bố cục đáp ứng, thân thiện với nhiều thiết bị và thậm chí bạn không cần sử dụng truy vấn phương tiện để thay đổi kiểu bố cục!
Ngoài các thuộc tính được đề cập ở đây, còn có các thuộc tính cho “quy tắc cột”, bao gồm các giá trị màu, kiểu và chiều rộng cho phép bạn tạo quy tắc giữa các cột của mình. Chúng sẽ được sử dụng thay vì đường viền nếu bạn muốn có một số dòng phân tách các cột của mình.
Hiện tại CSS Multiple Column Layout được hỗ trợ rất tốt. Với các tiền tố, hơn 94% người dùng web sẽ có thể nhìn thấy các kiểu này và nhóm không được hỗ trợ đó thực sự sẽ chỉ là các phiên bản Internet Explorer cũ hơn nhiều và không được hỗ trợ nữa.
Với mức hỗ trợ hiện tại, không có lý do gì để không bắt đầu thử nghiệm với Cột CSS và triển khai các kiểu này trong các trang web sẵn sàng sản xuất. Bạn có thể bắt đầu các thử nghiệm của mình bằng cách sử dụng HTML và CSS được trình bày trong bài viết này và thử nghiệm với các giá trị khác nhau để xem giá trị nào phù hợp nhất với nhu cầu bố cục trang web của bạn.