Thuộc tính CSS columns dùng để kiểm soát số lượng cột và chiều rộng của chúng. Nó là thuộc tính shorthand cho phép bạn đặt nhiều giá trị cùng lúc. Ví dụ như số lượng cột và chiều rộng của chúng.
Điều này giúp tạo bố cục đa cột dễ dàng hơn mà không cần định nghĩa thủ công từng cột.
Syntax
columns: column-width columns-count | auto | initial | inherit;
Property Values
Dưới đây là các giá trị thuộc tính cho thuộc tính CSS columns:
| Property Value | Description |
|---|---|
auto | Đặt column-width và column-count về giá trị mặc định của trình duyệt. |
integer | Chỉ định column-width và column-count bằng cách sử dụng các giá trị số nguyên. |
initial | Khởi tạo column-width và column-count về giá trị mặc định ban đầu. |
inherit | Kế thừa các giá trị column-width và column-count từ phần tử cha. |
CSS columns Property Examples
Dưới đây là các ví dụ về thuộc tính columns:
Example 1: CSS columns Property with Automatic Column Distribution
Trong ví dụ này thuộc tính columns được dùng để chia nội dung thành nhiều cột. Số lượng cột và chiều rộng được xác định tự động bởi trình duyệt. Nội dung bên trong thẻ div có class GFG sẽ được bố trí thành nhiều cột nhất có thể. Dựa trên không gian và nội dung có sẵn.
<!DOCTYPE html>
<html>
<head>
<title>CSS | columns Property</title>
<style>
body {
text-align: center;
color: green;
}
.GFG {
-webkit-columns: auto auto;
/* Chrome, Safari, Opera */
-moz-columns: auto auto;
/* Firefox */
columns: auto auto;
}
</style>
</head>
<body>
<h1>The column Property</h1>
<div class="GFG">
<h2>
Welcome to the world of Geeks!!
</h2>
How many times were you frustrated
while looking out for a good
collection of
programming/algorithm/interview
questions? What did you expect and
what did you get? This portal has been
created to provide well written, well
thought and well-explained solutions
for selected questions.
<div>
<strong>Our team includes:</strong>
<p>
Sandeep Jain: An IIT Roorkee
alumnus and founder of
GeeksforGeeks. He loves to
solve programming problems in
most efficient ways. Apart
from GeeksforGeeks, he has
worked with DE Shaw and Co. as
a software developer and JIIT
Noida as an assistant
professor.
</p>
<p>
Vaibhav Bajpai: Amazed by
computer science,he is a
technology enthusiast who
enjoys being a part of a
development. Off from work,
you canfind him in love with
movies, food, and friends.
</p>
<p>
Shikhar Goel: A Computer
Science graduate who likes to
make things simpler. When he's
not working, you can find him
surfing the web, learning
facts, tricks and life hacks.
He also enjoys movies in his
leisure time.
</p>
<p>
Dharmesh Singh: A software
developer who is always trying
to push boundaries in search
of great breakthroughs. Off
from his desk, you can find
him cheering up his buddies
and enjoying life.
</p>
<p>
Shubham Baranwal: A passionate
developer who always tries to
learn new technology and
software. In his free time,
either he reads some articles
or learns some other stuff.
</p>
</div>
</div>
</body>
</html>
Output:
Note: Nếu bất kỳ giá trị nào trong column-width và column-count không được chỉ định. Trình duyệt sẽ mặc định giá trị của chúng là auto.
integer: Giá trị này được dùng để chỉ định column-width và column-count bằng số nguyên.
Example 2: CSS columns Property for Multi-Column Layout
Trong ví dụ này chúng ta sử dụng thuộc tính CSS columns để tạo bố cục đa cột. Nội dung văn bản bên trong thẻ div với class GFG được chia thành năm cột. Mỗi cột có chiều rộng tối thiểu là 60px. Thuộc tính columns hoạt động trên các trình duyệt, với các tiền tố nhà cung cấp cụ thể để tương thích tốt hơn.
<!DOCTYPE html>
<html>
<head>
<title>CSS | columns Property</title>
<style>
body {
text-align: center;
color: green;
}
.GFG {
-webkit-columns: 60px 5;
/* Chrome, Safari, Opera */
-moz-columns: 60px 5;
/* Firefox */
columns: 60px 5;
}
</style>
</head>
<body>
<h1>The column Property</h1>
<div class="GFG">
<h2>
Welcome to the world of Geeks!!
</h2>
How many times were you frustrated
while looking out for a good
collection of
programming/algorithm/interview
questions? What did you expect and
what did you get? This portal has been
created to provide well written, well
thought and well-explained solutions
for selected questions.
<div>
<strong>Our team includes:</strong>
<p>
Sandeep Jain: An IIT Roorkee
alumnus and founder of
GeeksforGeeks. He loves to
solve programming problems in
most efficient ways. Apart
from GeeksforGeeks, he has
worked with DE Shaw and Co. as
a software developer and JIIT
Noida as an assistant
professor.
</p>
</div>
</div>
</body>
</html>
Output:
Supported Browser
Các trình duyệt được hỗ trợ bởi columns Property được liệt kê dưới đây:
Note: Hãy đảm bảo kiểm tra trên các phiên bản trình duyệt cũ hơn để tương thích. Một số có thể yêu cầu tiền tố nhà cung cấp (
-webkit,-moz) để có đầy đủ chức năng.