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

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 grid-template-columns và sử dụng hàm repeat() . Vậy hãy bắt đầu.

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 repeat() 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:

 .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }

Bằng cách sử dụng chỉ thị 1fr , 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.

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 CSS 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.

Để đạt được gói, chúng tôi có thể sử dụng các từ khóa auto-fit hoặc 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 grid grid-column và grid-row

Các thuộc tính grid-column và grid-row 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 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à:

Bạn có thích bài viết này không? Hãy cho tôi biết trong các ý kiến dưới đây!

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/