Bố cục Masonry là gì?  Bố cục khối xây là khi các vật phẩm có kích thước khác nhau được bố trí sao cho không có bất kỳ khoảng trống không đồng đều nào. Thông thường, khi các mục ở chế độ xem dạng lưới, chúng sẽ được căn chỉnh theo hàng, theo cột hoặc cả hai. Nhưng trong bố cục nề, ngay cả khi có một phần tử ngắn hơn trong một hàng hoặc cột, phần tử tiếp theo sẽ chiếm không gian.   Làm thế nào để đạt được Bố cục Masonry?  Có nhiều cách để đạt được điều này, nhưng một trong những cách tốt nhất là sử dụng   và sử dụng hàm   . Vậy hãy bắt đầu. grid-template-columns repeat()       Thuộc tính grid grid-template-columns  Ngoài việc xác định kích thước cột rõ ràng, một trong những khía cạnh có giá trị và thiết thực nhất của CSS Grid là khả năng lặp lại các cột cho đến khi chúng được lấp đầy và sau đó tự động đặt các mục vào đó. Đặc biệt, tùy chọn chỉ định số lượng cột chúng tôi muốn trong lưới và sau đó cung cấp cho trình duyệt quyền kiểm soát khả năng phản hồi của các cột đó dẫn đến ít cột hơn được hiển thị trên kích thước khung nhìn nhỏ hơn và nhiều cột hơn được hiển thị khi chiều rộng màn hình tăng lên.  Điều này đạt được bằng cách sử dụng hàm repeat() và các từ khóa tự động sắp xếp. Tóm lại, hàm   cho phép chúng ta lặp lại các cột bao nhiêu lần tùy ý. Ví dụ: nếu chúng ta đang tạo lưới 12 cột, chúng ta có thể viết như sau: repeat()   .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }  Bằng cách sử dụng chỉ thị   , trình duyệt được hướng dẫn phân chia không gian có sẵn giữa các cột để mỗi cột nhận được một phần bằng nhau. Đó là, bất kể nó lớn như thế nào, lưới trong ví dụ này sẽ luôn có 12 cột. Tuy nhiên, điều này là không đủ vì nội dung sẽ bị nén quá nhiều trên các khung nhìn nhỏ hơn. 1fr  Vì vậy, chúng tôi cần chỉ định chiều rộng tối thiểu cho các cột, đảm bảo rằng chúng không quá hẹp. Chúng ta có thể làm điều đó bằng cách sử dụng hàm   . minmax()   grid-template-columns: repeat(12, minmax(300px, 1fr));  Nhưng do cách   Grid hoạt động, hàng sẽ bị tràn. Chúng tôi đang hướng dẫn rõ ràng trình duyệt lặp lại các cột 12 lần mỗi hàng, vì vậy, ngay cả khi chiều rộng của chế độ xem quá nhỏ để phù hợp với tất cả chúng theo yêu cầu về chiều rộng tối thiểu mới, thì cột sẽ không bao bọc thành các hàng mới. CSS  Để đạt được gói, chúng tôi có thể sử dụng các từ khóa   hoặc   . auto-fit auto-fill   grid-template-columns: repeat(auto-fit, minmax(300px,1fr));  Bằng cách sử dụng những từ khóa này, chúng tôi hướng dẫn trình duyệt đảm nhận việc bao bọc phần tử và định cỡ cột cho chúng tôi, khiến các phần tử mà nếu không sẽ tràn vào hàng.  Đây là giao diện của lưới bây giờ:   Nhưng đây không phải là cách bố trí khối xây. Vậy làm thế nào để đạt được nó? Hãy xem nào.  Thuộc tính     và  grid grid-column grid-row  Các thuộc tính   và   chỉ định kích thước và vị trí của mục lưới trong bố cục lưới. Do đó, chúng tôi có thể chỉ định chiều rộng hoặc chiều cao của một mục lưới đơn lẻ trong lưới. Và để làm điều đó, chúng ta có thể sử dụng từ khóa   . grid-column grid-row span  Để tăng chiều rộng của mục lưới đầu tiên, chúng ta có thể viết:   .grid-item: nth-child(1) { grid-column: span 2; grid-row: span 1; }  Do đó, ô lưới đầu tiên sẽ kéo dài hai cột và có hình thức như sau:   Tương tự, nếu chúng ta muốn tăng chiều cao của grid item thứ hai, chúng ta có thể viết:   .grid-item: nth-child(2) { grid-column: span 1; grid-row: span 2; }  Do đó, ô lưới thứ hai sẽ kéo dài hai hàng và có hình thức như sau:   Theo cách tương tự, nếu chúng ta mở rộng mọi mục lưới theo cách mong muốn, chúng ta sẽ thu được kết quả như sau:   Tuy nhiên, nếu số lượng mục lưới quá nhiều, sẽ không thể chỉ định chiều cao và chiều rộng chính xác cho từng mục lưới. Vì vậy, thay vào đó, chúng ta có thể gán các giá trị một cách linh hoạt:   .grid-item: nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .grid-item: nth-child(7n+2) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+4) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+5) { grid-column: span 3; grid-row: span 1; }     Và đây là đầu ra:  Nhưng điều này là đủ? Hãy đưa nó lên cấp độ tiếp theo bằng cách thêm một số phối cảnh.  Chúng ta có thể đạt được điều này bằng cách thêm Perspective() và sử dụng thuộc tính Transform():   .active { transform: perspective(18cm) rotate(20deg); transform-style: preserve-3d; transform-origin: left; }  Ngoài ra, chúng tôi có một thanh menu, khi được chọn, sẽ chuyển lưới từ lưới thông thường sang lưới có phối cảnh. Chúng ta có thể sử dụng JavaScript cho điều đó:   menu.onclick=()=>{ grid.classList.toggle('active'); }     Và đầu ra cuối cùng là:    Hãy cho tôi biết trong các ý kiến dưới đây! Bạn có thích bài viết này không?     Bạn muốn biết đâu là giải pháp JavaScript linh hoạt nhất để trực quan hóa dữ liệu? Đọc tại đây: https://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

Cách xây dựng bố cục nề bằng CSS

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

184 Stories To Learn About Psychology

287 Stories To Learn About Blockchain Development

128 Stories To Learn About Charles Dickens

240 Stories To Learn About Astounding Stories

184 Stories To Learn About Psychology

287 Stories To Learn About Blockchain Development

128 Stories To Learn About Charles Dickens

240 Stories To Learn About Astounding Stories

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps