Dave Rupert với một số phép thuật CSS hiện đại giải quyết một trong những câu hỏi hóc búa kinh điển: điều gì sẽ xảy ra khi CSS dành cho thành phần không thể xử lý nội dung mà chúng ta ném vào nó?
Tình huống cụ thể là khi lưới bố trí mong đợi một số lượng mục chẵn, nhưng thay vào đó được cung cấp một số lẻ. Chúng ta chỉ còn lại một phần tử “lủng lẳng” ở cuối làm lệch bố cục. Có vẻ như những gì cần thiết là một số CSS phòng thủ và Dave hoàn thành nó.
Anh ấy đạt tới :has() để viết một bộ chọn tiện lợi đánh hơi mục cuối cùng trong một lưới có chứa một số lẻ các mục:
.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }Phá vỡ điều đó:
- Chúng tôi có một vùng chứa chính của
.items. - Nếu thùng chứa
:has()an.itemđứa trẻ cuối cùng thuộc loại của nó, - … Và điều đó
.itemxảy ra là một trường hợp được đánh số lẻ, - … Sau đó chọn cái đầu tiên
.itemphần tử của loại đó và phong cách cho nó!
Trong trường hợp này, điều đó cuối cùng .item có thể được đặt thành toàn chiều rộng để ngăn chặn các lỗ hổng trong bố cục.
Nếu… thì… CSS có quyền hạn logic có điều kiện! Chúng tôi chỉ nói về hỗ trợ cho Safari TP và Edge / Chrome Canary vào lúc này, nhưng điều đó khá tuyệt vời.
Thật tình cờ, Temani Afif gần đây đã chia sẻ những thủ thuật mà anh ấy đã học được khi thử nghiệm với các lưới ngầm. Bằng cách tận dụng thuật toán sắp xếp vị trí tự động của CSS Grid, chúng tôi thậm chí không phải khai báo rõ ràng một số cột và hàng cố định cho một lưới - CSS sẽ tạo chúng cho chúng tôi nếu chúng cần!
Không, các kỹ thuật của Temani không phải là giải pháp thay thế cho tình thế tiến thoái lưỡng nan của Dave. Nhưng kết hợp cách tiếp cận của Temani với các mẫu bố cục lưới có thể lặp lại với việc sử dụng CSS phòng thủ của Dave :has(), chúng tôi nhận được một lưới khá mạnh mẽ và phức tạp, nhẹ và có khả năng xử lý bất kỳ số lượng mục nào trong khi duy trì một mẫu cân bằng, có thể lặp lại.
