Khám phá bố cục nhiều cột trong CSS

Các bố cục nơi nội dung luân chuyển giữa nhiều cột và bố cục kiểu tạp chí nhiều cột giờ đây có thể dễ dàng triển khai trong CSS bằng cách sử dụng một vài luật đơn giản được xác định như một phần của đặc tả Bố cục Đa cột CSS . Điều này, cùng với lưới CSS và flexbox , thực sự cho phép ta xác định khá nhiều loại bố cục với nỗ lực tối thiểu. Ta hãy xem xét những gì hiện có thể về bố cục nhiều cột.

---

Bố cục nhiều cột cơ bản

Bố cục nhiều cột được xác định với thuộc tính số cột hoặc chiều rộng cột được đặt trên phần tử khối có chứa.

số cột

column-count nhận một giá trị nguyên cho số cột mà phần tử khối phải có:

.col {   background: var(--subtle-yellow2);   padding: 1rem 2rem; }  .col-3 {   column-count: 3; } 

<article class="col col-3">   <p>...</p>   <p>...</p>   <p>...</p> </article> 

Để tạo bố cục đáp ứng, đơn giản như đặt một số cột khác nhau trên các cửa sổ xem nhỏ hơn:

@media (max-width: 600px) {   .col-3 {     column-count: 1;   } } @media (min-width: 601px)  and (max-width: 900px) {   .col-3 {     column-count: 2;   } } 

chiều rộng cột

Với chiều rộng cột , thay vì cung cấp số lượng cột chính xác, bạn cung cấp chiều rộng đề xuất cho chúng và số lượng cột sẽ được tính dựa vào đó và không gian có sẵn. Đây là một ví dụ trong đó các cột có chiều rộng là 8rem :

.col-8rem {   column-width: 8rem; } 

<article class="col col-8rem">   <p>...</p>   <p>...</p>   <p>...</p> </article> 

Nếu bạn thay đổi kích thước chế độ xem của bạn , bạn sẽ nhận thấy rằng việc sử dụng chiều rộng cột sẽ làm cho bố cục nhiều cột đáp ứng theo mặc định mà không cần xác định số lượng cột khác nhau cho các chế độ xem nhỏ hơn.

cột

Ngoài ra còn có một thuộc tính viết tắt cho cột đếm và cột với các cột được gọi. Đây là cách bạn đặt một containers có 2 cột hoặc nhiều cột với chiều rộng là 12rem:

.col-2-12rem {   columns: 2 12rem; } 

Việc đặt cả số lượng cột và chiều rộng cột có lẽ hơi kỳ lạ đối với hầu hết các trường hợp sử dụng, bởi vì sau đó trình duyệt sẽ quyết định tuân theo số lượng được cung cấp hoặc chiều rộng.

Khoảng cách & Luật

Bạn có thể chỉ định độ rộng của khoảng trống giữa các cột bằng thuộc tính cột-khoảng cách và bạn có thể xác định luật (dòng) ở giữa khoảng cách bằng thuộc tính luật cột .

cột-khoảng cách

Theo mặc định, hầu hết các trình duyệt sẽ sử dụng khoảng cách cột là 1rem nếu không có cột nào được chỉ định. Đây là một ví dụ với khoảng cách cột 5rem:

.col-gap-5rem {   column-gap: 5rem; } 

<article class="col col-gap-5rem col-3">   <p>...</p>   <p>...</p>   <p>...</p> </article> 

luật cột

Luật chỉ là một dòng giữa hai cột có nội dung. Giá trị cho luật cột có cùng định dạng với các giá trị cho thuộc tính đường viền:

.col-fancy-rule {   column-rule: 3px dotted hotpink; } 

<article class="col col-fancy-rule col-3 col-gap-5rem">   <p>...</p>   <p>...</p>   <p>...</p> </article> 

Khoảng cột

Với thuộc tính column-span được đặt thành một giá trị là tất cả , bạn có thể có các phần tử trong phần tử nhiều cột kéo dài toàn bộ chiều rộng và buộc ngắt hàng:

.col h3 {   column-span: all;   border-bottom: 2px solid var(--subtle-green1); } 

<article class="col col-fancy-rule col-3 col-gap-5rem">   <p>...</p>    <h3>Fancy-enough Title</h3>    <p>...</p>    <p>...</p> </article> 

Firefox không hỗ trợ cột-span vào thời điểm viết bài này.

Dấu ngắt cột

Bạn có thể kiểm soát cách một phần tử sẽ ngắt giữa các cột bằng các thuộc tính ngắt trước , ngắt bên trong và ngắt sau và với các giá trị tránh hoặc cột tránh . Dưới đây là một ví dụ đơn giản trong đó các phần tử đoạn văn sẽ không chia thành nhiều cột:

.breaks p {   break-inside: avoid-column; } 

<article class="col col-3 breaks">   <p>...</p>    <h3>Fancy-enough Title</h3>    <p>...</p>   <p>...</p> </article> 

Ví dụ tương tự không có luật break-inside sẽ trông như thế này, trong đó các đoạn văn có thể chảy đến nhiều cột:

Điền vào Cột

cột-điền kiểm soát cách nội dung sẽ được phân phối giữa các cột. Giá trị ban đầu, số dư , cho trình duyệt biết rằng nội dung nên được phân phối đồng đều giữa các cột.

Đầu tiên, đây là một ví dụ trong đó ta đặt chiều cao được mã hóa cứng trên containers nhiều cột và nơi nội dung được phân phối đồng đều do giá trị ban đầu của số dư :

<article class="col col-3 b30" style="height: 400px;">   <p>...</p>   <p>...</p>   <p>...</p> </article> 

Bây giờ đây là ví dụ tương tự, nhưng với điền vào cột được đặt thành tự động thay thế:

<article class="col col-3" style="column-fill: auto; height: 500px;">   <p>...</p>   <p>...</p>   <p>...</p> </article> 

Kết luận

Thuộc tính đa cột là một công cụ bố cục CSS hiện đại khác cùng với lưới CSS và hộp linh hoạt cung cấp cho người tạo khả năng nhanh chóng xác định bố cục linh hoạt và động.

Hỗ trợ trình duyệt: Kể từ năm 2020, Tôi có thể sử dụng đa cột không? cho thấy 99% trình duyệt trên toàn thế giới hỗ trợ các thuộc tính đa cột được thảo luận ở trên. Các trình duyệt được gắn cờ là có hỗ trợ một phần không hỗ trợ các thuộc tính như column-context: avoid-column không được thảo luận trong bài viết này.

---

---

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03