CSS3: columns
Với một số quy tắc CSS, ta có thể tạo một bố cục cho trang web giống như một trang báo viết với các cột được thiết lập rất uyển chuyển. Các cột sẽ tự động được điều chỉnh và cân đối sao cho nội dung văn bản được hiển thị một cách tự nhiên nhất.
Ví dụ 1:
.intro {
-webkit-columns: 300px 2;
-moz-columns: 300px 2;
columns: 300px 2;
}
Thuộc tính columns cho phép ta đưa vào giá trị liên quan đến thuộc tính column-count, column-width, hoặc đưa vào cả hai.
columns: <column-width> || <column-count>;
Ta nên sử dụng cả column-count và column-width để có thể tạo được bô cục (layout) nhiều cột một cách uyển chuyển. column-count chỉ ra số cột tối đa cho phép, còn column-width chỉ ra độ rồng tối thiểu cho mỗi cột. Bằng cách kết hợp các thuộc tính này với nhau thì bố cục đa cột sẽ tự động chuyển thành cột đơn khi trình duyệt có kích thước nhỏ mà không cần phải sử dụng @media hay những cách khác.
Ví dụ 2: Sử dụng thuộc tính columns.
</style>
</style>
</style>
.example {
-webkit-columns: 4 150px;
-moz-columns: 4 150px;
columns: 4 150px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}
body {
font-size: 12px;
font-family: 'Georgia', serif;
font-weight: 400;
line-height: 1.45;
color: #333;
background: #ecf0f1;
padding: 1em;
}
h1 {
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
font-size: 2em;
margin-bottom: 0.5em;
line-height: 1.2;
}
p {
margin-bottom: 1.3em;
text-align: justify;
}
.lead {
font-variant: small-caps;
font-size: 1.3em;
text-align: left;
font-style: italic;
}
</style>
<div class="example">
<h1>Sed dignissim lacinia nunc</h1>
<p class="lead">Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p>
<p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>
<p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p>
<p>Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p>
</div>
Bố cục đa cột làm việc được đối với các phần tử khối gồm nhiều phần tử được liệt kê như phần menu điều hướng.
Ví dụ 3: Tạo menu điều hướng bằng columns.
<style>
.nav {
background: #2c3e50;
-webkit-columns: 100px 4;
-moz-columns: 100px 4;
columns: 100px 4;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
-webkit-column-rule: 1px solid #1a242f;
-moz-column-rule: 1px solid #1a242f;
column-rule: 1px solid #1a242f;
}
.nav a {
text-decoration: none;
color: white;
display: block;
padding: 1em;
text-align: center;
border-bottom: 1px solid #1a242f;
}
.nav a:hover {
background: #1a242f;
}
body {
font-family: 'Georgia', serif;
font-weight: 400;
line-height: 1.45;
color: #333;
background: #ecf0f1;
}
<style>
<body> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact</a></li> </ul></body>
Để tinh chỉnh bố cục đa cột thì ta sử dụng thuộc tính break-inside cho những phần tử cụ thể để đảm bảo chúng không bị "mắc kẹt" giữa các cột.