Trong bố cục nhiều cột, bạn có thể làm cho các phần tử mở rộng trên các cột với column-span.
h2 ( -webkit-column-span: all; column-span: all; )Gán column-spancho một phần tử bên trong bố cục nhiều cột để biến nó thành một phần tử bao trùm. Bố cục nhiều cột sẽ tiếp tục với phần tử không bao trùm tiếp theo.
Giá trị của column-spancó thể là allhoặc none.
Đặt một phần tử với column-span: allđể làm cho nó mở rộng các cột.
Giá trị nonecho thuộc tính là công tắc hủy cho một phần tử bao trùm. Bạn có thể sử dụng điều này khi làm việc với các truy vấn phương tiện để yêu cầu phần tử mở rộng ngừng mở rộng.
Xem ví dụ về cột-span của Bút bằng CSS-Tricks (@ css-trick) trên CodePen.
Hỗ trợ trình duyệt
Firefox không hỗ trợ điều này column-span, nhưng có những cách giải quyết thú vị.
Đây là sự hỗ trợ cho bố cục Nhiều cột nói chung:
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 91 | 87 | 10 | 12 | 10 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.0-10.2 |
Đừng quên tiền tố của bạn!