1. Tìm hiểu về Masonry layout
Trước khi học về CSS3 Multi-column, mình nghĩ mình nên giới thiệu qua cho các bạn hiểu về Masonry layout. Các bạn cùng nhìn ảnh dưới này nhé
Ảnh bên trên là 1 dạng hiển thị kiểu Masonry layout. Vậy kiểu hiển thị này bắt nguồn từ đâu? Tên gọi của nó bắt nguồn từ tên một plugin trong jquery đó là Masonry plugin, được phát triển bởi David DeSandro – một designer của Twitter.
Masonry Layout dược sử dụng lần đầu tiên bởi trang chuyên chia sẻ hình ảnh project nổi tiếng là Pinterest.com nên Masonry Layout còn được biết đến với cái tên Pinterest Style Layout. Mình sẽ nói sơ qua về loại layout mới mẻ này cho các bạn cùng hiểu nhé.
Như chúng ta thường thấy thì các loại bố cục layout cổ điển thường sử dụng thuộc tính Float trong CSS để dàn trang, sắp xếp các element side-by-side, nghĩa là sắp thứ tự theo chiều ngang rồi đến chiều dọc. Nếu như height của các element không đều nhau thì khi dàn hàng chúng sẽ tạo tao ra rất nhiều khoảng trống không cần thiết trong layout.
Nhưng đối với Masonry Layout, các element sẽ được đưa vào các cột có chiều rộng (Width) được quy định sẵn, các element có chiều cao (Height) khác nhau nằm chung một cột sẽ được xếp vào mà không tạo ra khoảng trống do khác hàng. Các bạn cứ tưởng tượng Masonry giống như trò chơi xếp gạch – Tetris vậy
Như vậy các bạn đã hiểu thế nào là Masonry layout rồi chứ? Vậy, một câu hỏi đặt ra lúc này là: Làm thế nào để tạo được Masonry layout chỉ bằng CSS3 mà không dùng Masonry plugin?
Câu trả lời đã nằm trên tiêu đề của bài viết này. Đúng vậy, chúng ta dùng CSS3 Multi-column. Và bây giờ chúng ta cùng đi tìm hiểu về cách sử dụng CSS3 Multi-column như thế nào để có thể tạo được Masonry layout nhé.
2. CSS3 Multi-column
Multi-column nó có các thuộc tính như sau:
| Thuộc tính | Giá trị | Mô tả |
|---|---|---|
| column | number. VD: column: 3; | Xác định số lượng cột muốn hiển thị. |
| column | đơn vị cụ thể. VD: column: 200px; | Xác định chiều rộng cụ thể cho cột. |
| column-count | number hoặc auto | Đối với gái trị number sẽ xác định số lượng cột còn auto thì số cột sẽ được xác định bởi các thuộc tính colum khác. |
| column-gap | number hoặc normal | Number là xác định khoảng cách chính xác giữa các cột. VD: 20px. Còn già trị normal thì khoảng cách các cột sẽ có giá trị mặc định (1em) |
| column-rule-style | dashed, dotted, double, groove, hidden, inset, none, outset, ridge, solid | Thiết lập kiểu của các đường kẻ giữa các cột. |
| column-rule-color | Mã màu sắc hoặc tên màu | Thiết lập màu của các đường kẻ giữa các cột. |
| column-rule-width | number (VD: 5px), medium, thin, thick | Xác định chiều rộng của các đường kẻ |
| column-rule | đơn vị, style, color | Đây là 1 kiểu viết kết hợp của 3 cái bên trên (tương tự như khi viết gộp của thuộc tính border) |
| column-span | 1 hoặc all | Chỉ định số cột mà phần tử dùng (giống như colspan của table) |
| column-width | number hoặc auto | Xác định độ rộng |
Cùng coi Demo nhé
3. Lời kết
Như vậy, qua bài này các bạn cũng hiểu thế nào là Masonry layout và biết cách tạo ra nó rồi nhỉ. Thực lòng mà nói Masonry layout là 1 kiểu layout rất đẹp đúng không các bạn? Mình nghĩ không ít bạn cũng muốn sử dụng kiểu layout như thế này mà chưa tìm được phương pháp tối ưu nhất. Bây giờ thì các bạn có thể dễ dàng sử dụng layout này cho web của mình rồi. Chúc các bạn thành công!
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Tìm hiểu về Masonry layout2. CSS3 Multi-column3. Lời...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Tìm hiểu về Masonry layout2. CSS3 Multi-column3. Lời kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Tìm hiểu về Masonry layout2. CSS3 Multi-column3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Tìm hiểu về Masonry layout2. CSS3 Multi-column3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Tìm hiểu về Masonry layout2. CSS3 Multi-column3. Lời kếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory...