- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính column
Định nghĩa và sử dụng
Thuộc tính column trong css3 dùng để chia nội dung thành phần thành nhiều cột khác nhau, không cần phải sử dụng thuộc tính float trong css.
Thuộc tính của column trong css3:
column | đơn vị | column: 200px; | Xác định chiều rộng cho cột. |
Số nguyên | column: 3; | Xác định số lượng cho cột. | |
column-count | Số nguyên | column-count: 3; | Xác định số lượng cho cột. |
auto | column-count: auto; | Số cột sẽ được xác định bởi các thuộc tính colum khác. | |
column-gap | đơn vị | column-gap: 30px; | Xác định khoảng cách giữa các cột. |
normal | column-gap: normal; | Khoảng cách cột sẽ có giá trị như mặc định [1em]. | |
column-rule-style | dashed | column-rule-style: dashed; | Thiết lập kiểu của các đường kẻ giữa các cột. |
dotted | column-rule-style: dotted; | ||
double | column-rule-style: double; | ||
groove | column-rule-style: groove; | ||
hidden | column-rule-style: hidden; | ||
inset | column-rule-style: inset; | ||
none | column-rule-style: none; | ||
outset | column-rule-style: outset; | ||
ridge | column-rule-style: ridge; | ||
solid | column-rule-style: solid; | ||
column-rule-color | Màu sắc | column-rule-color: #cc0000; | Thiết lập màu của các đường kẻ giữa các cột. |
column-rule-width | đơn vị | column-rule-width: 200px; | Xác định chiều rộng cho các đường kẻ giữa các cột. |
medium | column-rule-width: medium; | Xác định chiều rộng trung bình của các đường kẻ giữa các . | |
thin | column-rule-width: thin; | Xác định các đường kẻ nhỏ. | |
thick | column-rule-width: thick; | Xác định các đường kẻ dày. | |
column-rule | đơn vị | column-rule: 200px solid #cc0000; | Xác định chiều rộng các đường kẻ cho cột. |
Kiểu | Thiết lập kiểu của các đường kẻ giữa các cột. | ||
Màu sắc | Thiết lập màu của các đường kẻ giữa các cột. | ||
column-span | 1 | column-span: 1; | Xác định thành phần nằm trong 1 cột. |
all | column-span: all; | Xác định thành phần nằm trải dài tất cả các cột. | |
column-width | đơn vị | column-width: 200px; | Xác định chiều rộng cho cột. |
auto | column-width: auto; | Chiều rộng cột sẽ được quyết định bởi trình duyệt. |
HTML viết:
column rule
Hiển thị trình duyệt khi chưa có CSS:
CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }
Hiển thị trình duyệt khi có CSS:
column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule
Đã đăng vào thg 10 17, 2018 9:55 SA 3 phút đọc
1. Lời mở đầu
Các cột có chiều cao bằng nhau thường xuất hiện trong việc thiết kế giao diện web. Nếu các cột thiết kế trên cùng một giao diện mà chiều cao của các cột không bằng nhau sẽ ảnh hưởng đến việc thiết kế giao diện của khối cũng như tổng thể toàn trang. Vài năm trước, chúng ta đã có thể sử dụng thuộc tính cở bản của table
để tạo ra các cột bằng nhau. Hiện nay, chúng ta đã có các giải pháp đơn giản hơn để tạo chiều cao cột bằng cách sử dụng CSS3. Sau đây là
một số cách cơ bản để các cột có chiều cao bằng nhau trên web.
2. Sử dụng các thuộc tính CSS của bảng [Table properties]
Đầu tiên chúng ta phải kể đến đó là cách sử dụng thuộc tính của table
, đây là cách mà được khá nhiều người xử dụng từ trước đến nay. Vì ngoài khả năng tạo ra các cột có chiều dài bằng nhau còn có thể căn chỉnh nội dung theo top
center
hoặc bottom
.
HTML:
Using table properties
Column 1
Hello World
Column 2
Hello World!
Hello World!
Hello World!
Hello World!
Column 3
Some other text..
Some other text..
CSS:
.col-wrap {
display: table;
width: 100%;
}
.col {
display: table-cell;
padding: 1rem
}
.col:nth-child[even]{
background-color:orange;
}
.col:nth-child[odd]{
background-color:yellow;
}
3. Sử dụng CSS grid
Phương pháp tiếp theo tôi nhắc đến là phương pháp sử dụng grid. Phương pháp này hơi phức tạp hơn một chút bởi bạn cần tính toán chiều rộng của các cột bên trong phần tử cha bằng cách sử dụng grid-template-columns
.
Ví dụ:
- Nếu muốn chia 2 cột thì ta có:
grid-template-columns: 50% 50%
Ngoài ra để 2 cột có chiều cao bằng nhau và khoảng cách giữa 2 cách nhau 1 khoảng cách nhất định [ giống như cột col
của bootstrap ] ta sử dụng grid-column-gap
Ví dụ:
- khoảng
cách giữa 2 cột là 30px:
grid-column-gap: 30px
- Một chú ý nhỏ là khi sử dụng
grid-column-gap
thì độ rộng của các phần tử con sẽ tăng lên như ví dụ trên khi sử dụng cùng lúcgrid-template-columns: 50% 50%
, vàgrid-column-gap: 30px
thì độ dài các phần tử con sẽ bằng50% + 50% + 30px
như vậy sẽ bị thừa ra 30px và sẽ xuất hiện scroll. Để khắc phục tình trạng này ta nên sử dụng công thức dưới dây:
W[adjusted] = W[individual] - [1rem * 1/2]
Trong đó :
- W[individual]: là độ rộng của 1 cột
- 1rem: là
khoảng cách mà
grid-column-gap
đã sử dụng có thể thay đổi1rem
bằng đơn vị bất kì
Sau đây là ví dụ cụ thể:
HTML:
Using css grid
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia molestiae iure, a laboriosam facere consequuntur repellendus aspernatur porro ut. Doloremque fugiat saepe maiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto incidunt, accusantium, cumque obcaecati similique et ducimus inventore fugiat velit exercitationem dolorem iusto porro repellat accusamus quia eum, quos eveniet expedita!. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto incidunt, accusantium, cumque obcaecati similique et ducimus inventore fugiat velit exercitationem dolorem iusto porro repellat accusamus quia eum, quos eveniet expedita!
CSS
.g-grid {
display: grid;
/* W[adjusted] = W[individual] - [1rem * 1/2] */
grid-template-columns: calc[50% - [30px * 1/2]] calc[50% - [30px * 1/2]];
grid-column-gap: 30px;
}
.g-grid-col {
padding: 30px;
background-color: red;
color: #fff;
}
4. Sử dụng CSS Flexbox
Sử dung flexbox là cách tiếp cận mới và sử dụng dễ dàng hơn. Không những có thể tạo ra được các cột bằng nhau giống như table
mà còn khắc phục được nhược điểm của table
đó là khả năng thay đổi vị trí của các cột chỉ bằng cách sử dụng order
, đặt thứ tự của chúng đến vị
trí mong muốn. Chính vì sự cơ động này Flexbox hiện nay được sử dụng khá nhiều trong các UI framework
HTML
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, quaerat blanditiis. Eligendi quae tenetur ratione repellendus ut.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, nulla! Assumenda dignissimos harum, molestias iure repudiandae ratione praesentium. Illo facilis et velit ut quam omnis, porro molestiae magni, laboriosam ipsa.
CSS
.f-grid {
display: flex;
justify-content: space-between;
margin-left: -1rem;
flex-flow: row wrap;
}
.f-grid-col {
flex: 1 0;
background-color: green;
margin-left: 1rem;
margin-bottom: 1rem;
padding: 1rem;
}
Demo:
5. Kết luận
Đó là một số cách tạo ra các cột bằng nhau với css hiện nay, bạn có thể chọn một trong các cách trên trên để tạo giao diện web đẹp mắt. Phương pháp đơn giản, tối ưu và được sử dụng phổ biến nhất hiện nay là sử dụng css flexbox.
All rights reserved