CSS - Thiết kế bố cục nhiều cột

Xin chào các bạn nhà phát triển web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của thiết kế bố cục nhiều cột trong CSS. Là người dạy máy tính ở khu phố của bạn, tôi ở đây để hướng dẫn các bạn qua hành trình này với rất nhiều ví dụ và giải thích. Hãy bắt đầu nào!

Giới thiệu về bố cục nhiều cột

Hãy tưởng tượng bạn đang đọc một tờ báo. Chú ý cách văn bản được tổ chức thành các cột ngăn nắp? Đó chính xác là điều chúng ta sẽ thực hiện với CSS, nhưng trên các trang web! Bố cục nhiều cột cho phép chúng ta tạo ra các cấu trúc nội dung hấp dẫn và dễ đọc.

Bố cục nhiều cột trong CSS - Bố cục ba cột

Hãy bắt đầu với một bố cục ba cột cơ bản. Điều này非常适合 tạo nội dung theo phong cách tạp chí hoặc tổ chức thông tin trên một trang web.

<div class="three-column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.three-column {
column-count: 3;
column-gap: 40px;
}

Trong ví dụ này, chúng ta sử dụng thuộc tính column-count để chỉ định rằng chúng ta muốn có ba cột. Thuộc tính column-gap thiết lập khoảng cách giữa mỗi cột.

Đặt chiều rộng cột trong CSS

Đôi khi, thay vì chỉ định số lượng cột, bạn có thể muốn đặt chiều rộng cụ thể cho mỗi cột. Hãy xem cách nó hoạt động:

<div class="flexible-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.flexible-columns {
column-width: 200px;
}

Ở đây, chúng ta sử dụng column-width để thiết lập mỗi cột rộng 200 pixel. Trình duyệt sẽ tạo ra càng nhiều cột càng có thể trong khi duy trì chiều rộng này.

Định dạng cột trong CSS

Bây giờ, hãy thêm một chút phong cách cho các cột của chúng ta. Chúng ta có thể thêm viền, thay đổi màu nền, và hơn thế nữa!

<div class="styled-columns">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.styled-columns {
column-count: 3;
column-gap: 40px;
column-rule: 4px dotted #ff00ff;
column-rule-style: dotted;
column-rule-width: 4px;
column-rule-color: #ff00ff;
}

Trong ví dụ này, chúng ta sử dụng column-rule như một thuộc tính viết tắt để thêm một đường gạch chéo giữa các cột. Chúng ta cũng có thể thiết lập các thuộc tính này riêng lẻ bằng cách sử dụng column-rule-style, column-rule-width, và column-rule-color.

Cột跨越

Đôi khi, bạn có thể muốn một phần nội dung跨越 nhiều cột. Hãy xem cách chúng ta có thể thực hiện điều đó:

<div class="spanning-columns">
<h2>This heading spans all columns</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="span-two">This paragraph spans two columns. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>

.spanning-columns {
column-count: 3;
column-gap: 40px;
}

.spanning-columns h2 {
column-span: all;
text-align: center;
}

.span-two {
column-span: 2;
background-color: #f0f0f0;
padding: 10px;
}

Ở đây, chúng ta sử dụng column-span: all để làm cho tiêu đề跨越所有列, và column-span: 2 để làm cho một đoạn văn跨越 hai cột.

Cột và phân đoạn

Phân đoạn đề cập đến cách nội dung bị chia cắt giữa các cột. Hãy xem cách chúng ta có thể kiểm soát điều này:

<div class="fragmented-columns">
<h3>Chapter 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h3>Chapter 2</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.fragmented-columns {
column-count: 2;
column-gap: 40px;
}

.fragmented-columns h3 {
break-after: column;
}

Trong ví dụ này, chúng ta sử dụng break-after: column để đảm bảo rằng mỗi tiêu đề chương bắt đầu từ đỉnh của cột mới.

Các thuộc tính liên quan

Hãy tóm tắt tất cả các thuộc tính chúng ta đã học trong một bảng tiện lợi:

Thuộc tính	Mô tả
column-count	Chỉ định số lượng cột
column-width	Đặt chiều rộng của mỗi cột
column-gap	Định nghĩa khoảng cách giữa các cột
column-rule	Viết tắt để thiết lập một đường giữa các cột
column-rule-style	Đặt phong cách của đường cột
column-rule-width	Đặt chiều rộng của đường cột
column-rule-color	Đặt màu của đường cột
column-span	Cho phép một phần tử跨越 các cột
break-after	Điều khiển sự phân đoạn của cột sau một phần tử

Và đó là tất cả, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới của bố cục nhiều cột trong CSS. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngần ngại thử nghiệm với các thuộc tính này. Ai biết được? Bạn có thể tạo ra trang web theo phong cách tạp chí tiếp theo!

Như giáo sư cũ của tôi từng nói, "CSS giống như nấu ăn. Bạn có thể làm rối loạn ban đầu, nhưng với sự thực hành, bạn sẽ tạo ra những kiệt tác trong thời gian ngắn!" Vậy hãy tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó!

Credits: Image by storyset