Trong nhiều năm, CSS nổi là một thành phần khó, 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 được gọi cho nhiều cột, bạn đã chuyển sang phao . Vấn đề với phương pháp này là, mặc dù sự khéo léo đáng kinh ngạc mà các nhà thiết kế web / nhà phát triển đã thể hiện trong việc tạo bố trí trang phức tạp, CSS nổi chưa bao giờ thực sự được sử dụng theo cách này.
Trong khi nổi và định vị CSS 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 cho thấy nhiều tiềm năng là nhiều cột CSS.
Các cột CSS đã tồn tại được vài năm, nhưng thiếu sự hỗ trợ trong các trình duyệt cũ (chủ yếu là các phiên bản cũ của Internet Explorer) đã giữ cho nhiều chuyên gia web không sử dụng các kiểu này trong công việc sản xuất của họ.
Với sự hỗ trợ cuối cùng 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 với các tùy chọn bố cục CSS mới, bao gồm các cột CSS và phát hiện ra 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.
Khái niệm cơ bản về cột CSS
Như tên gọi của nó, CSS Nhiều Cột (còn được gọi là bố cục đa cột CSS3) cho phép bạn chia nội dung thành một số cột được đặt. 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 trống cột
Đối với cột đếm, bạn chỉ định số lượng cột bạn muốn. Khoảng cách cột sẽ là máng xối hoặc khoảng trống giữa các cột đó. Trình duyệt sẽ lấy các giá trị này và chia nhỏ nội dung đồng đều thành số cột bạn chỉ định.
Một ví dụ phổ biến về CSS nhiều cột trong thực tế sẽ 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ó đánh dấu HTML sau (lưu ý rằng cho các mục đích ví dụ, tôi chỉ đang bắt đầu một đoạn văn, trong khi thực tế có thể có nhiều đoạn nội dung trong đá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 sau:
.content {-moz-column-count: 3; -webkit-column-count: 3; cột đếm: 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 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 đó để phân chia nội dung đồng đều. Lưu ý rằng chúng ta 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ư thế này, việc sử dụng nó theo cách này là có vấn đề khi 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 điều nà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 “nếp gấp” của màn hình.
Người đọc sau đó sẽ phải di chuyển lên và xuống để đọc toàn bộ nội dung. Tuy nhiên, hiệu trưởng của Cột CSS dễ dàng như bạn thấy ở đây, và nó có thể được sử dụng để làm nhiều hơn là chỉ chia nhỏ nội dung của một số đoạn văn - nó thực sự có thể được sử dụng để bố trí.
Bố cục với cột CSS
Giả sử bạn có trang web có khu vực nội dung có 3 cột nội dung. Đây là một cách bố trí trang web rất điển hình, và để đạt được 3 cột đó, bạn thường sẽ nổi các bộ phận đang ở. Với CSS nhiều cột, nó dễ dàng hơn nhiều.
Dưới đây là một số mẫu HTML:
Tin mới nhất
Nội dung sẽ đến đây ...
Từ Blog của chúng tôi
Nội dung sẽ đến đây ...
Sự kiện sắp tới
Nội dung sẽ đến đây ...
CSS để làm cho nhiều cột này bắt đầu bằng những gì bạn đã thấy trước đây:
.content {-moz-column-count: 3; -webkit-column-count: 3; cột đếm: 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à, vì trình duyệt muốn chia nhỏ nội dung này một cách đồng đều, vì vậy nếu độ dài nội dung của các bộ phận khác nhau, trình duyệt sẽ thực sự chia nội dung của một bộ phận riêng lẻ, thêm phần bắt đầu của 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 độ dài nội dung khác nhau bên trong mỗi bộ phận)!
Đó không phải là điều bạn muốn. Bạn muốn mỗi bộ phận này tạo ra một cột riêng biệt và bất kể nội dung của một bộ phận riêng lẻ lớn hay nhỏ có thể là bao nhiêu, bạn không bao giờ muốn chia nó ra. Bạn có thể đạt được điều này bằng cách thêm một dòng CSS bổ sung sau:
.content div {display: inline-block; }Điều này sẽ buộc các đơn vị nằm bên trong “nội dung” này vẫn còn nguyên vẹn ngay cả khi trình duyệt chia nhỏ 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 kỳ thứ gì ở đây với 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 đổi kích thước, khiến chúng trở thành ứng dụng lý tưởng cho các trang web đáp ứng. Với kiểu "inline-block" đó, mỗi phần của bạn sẽ là một cột riêng biệt của nội dung.
Sử dụng chiều rộng cột
Có một thuộc tính khác ngoài "cột đếm" 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 đây, thay vào đó chúng tôi có thể thực hiện điều này với CSS của chúng tôi:
.content {-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; } .content div {display: inline-block; }Cách làm việc này là trình duyệt sử dụng “chiều 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 có chiều rộng nhỏ hơn 500 pixel, 3 bộ phận này sẽ xuất hiện trong một cột, một trong các đỉnh của một cột khác. Đây là bố cục điển hình được sử dụng cho bố cục màn hình di động / 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 khoảng trống cột được chỉ định, trình duyệt sẽ tự động chuyển từ một bố cục cột đơn 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 một thiết kế 3 cột, với mỗi bộ phận của chúng tôi được hiển thị trong cột riêng của họ. Một lần nữa, đây là một cách tuyệt vời để có được một số bố cục thân thiện với nhiều thiết bị đáp ứng và thậm chí bạn không cần sử dụng các truy vấn phương tiện để thay đổi kiểu bố cục!
Thuộc tính cột khác
Ngoài các thuộc tính được trình bày ở đây, cũng 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. Đây sẽ được sử dụng thay vì biên giới nếu bạn muốn có một số dòng tách cột của bạn.
Thời gian để thử nghiệm
Hiện tại, CSS Multiple Column Layout được hỗ trợ rất tốt. Với tiền tố, hơn 94% người dùng web sẽ có thể xem các kiểu này và nhóm không được hỗ trợ đó thực sự chỉ là các phiên bản cũ hơn của Internet Explorer mà bạn có thể không hỗ trợ nữa.
Với mức hỗ trợ này hiện tại, không có lý do gì để không bắt đầu thử nghiệm với các 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 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à chơi xung quanh với các giá trị khác nhau để xem điều gì sẽ phù hợp nhất với nhu cầu bố cục của trang web của bạn.