Tôi hiểu rằng điều này là không thể đạt được bằng cách sử dụng Flexbox, vì mỗi hàng chỉ có thể là chiều cao tối thiểu cần thiết để phù hợp với các phần tử của nó, nhưng liệu điều này có thể đạt được bằng cách sử dụng CSS Grid mới hơn không?
Để rõ ràng hơn, tôi muốn chiều cao bằng nhau cho tất cả các phần tử trong lưới trên tất cả các hàng, không chỉ mỗi hàng. Về cơ bản, "ô" cao nhất sẽ quy định chiều cao của tất cả các ô, không chỉ các ô trong hàng của nó.
Câu trả lời:
Nếu mục tiêu là tạo lưới có các hàng có chiều cao bằng nhau, trong đó ô cao nhất trong lưới đặt chiều cao cho tất cả các hàng, đây là một giải pháp nhanh chóng và đơn giản:
grid-auto-rows: 1frGrid Layout cung cấp một đơn vị để thiết lập độ dài linh hoạt trong vùng chứa lưới. Đây là frđơn vị. Nó được thiết kế để phân phối không gian trống trong vùng chứa và hơi tương tự với thuộc flex-growtính trong flexbox.
Nếu bạn đặt tất cả các hàng trong vùng chứa lưới thành 1fr, hãy nói như thế này:
grid-auto-rows: 1fr;... thì tất cả các hàng sẽ có chiều cao bằng nhau.
Nó không thực sự có ý nghĩa vì frnó được cho là phân phối không gian trống. Và nếu một số hàng có nội dung với các chiều cao khác nhau, thì khi không gian được phân phối, một số hàng sẽ nhỏ hơn và cao hơn theo tỷ lệ.
Ngoại trừ , được chôn sâu trong thông số kỹ thuật của lưới là phần nhỏ này:
7.2.3. Độ dài linh hoạt:
frđơn vị...
Khi không gian có sẵn là vô hạn (xảy ra khi chiều rộng hoặc chiều cao của vùng chứa lưới là vô hạn),
frcác rãnh lưới có kích thước linh hoạt ( ) được định kích thước theo nội dung của chúng trong khi vẫn giữ nguyên tỷ lệ tương ứng.Kích thước đã sử dụng của mỗi đường lưới có kích thước linh hoạt được tính bằng cách xác định
max-contentkích thước của từng đường lưới có kích thước linh hoạt và chia kích thước đó cho hệ số linh hoạt tương ứng để xác định “1frkích thước giả định ”.Giá trị lớn nhất được sử dụng làm
1frchiều dài đã phân giải (phần linh hoạt), sau đó được nhân với hệ số uốn cong của mỗi đường lưới để xác định kích thước cuối cùng của nó.
Vì vậy, nếu tôi đang đọc điều này một cách chính xác, khi xử lý lưới có kích thước động (ví dụ: chiều cao là vô hạn), các rãnh lưới (hàng, trong trường hợp này) được định kích thước theo nội dung của chúng.
Chiều cao của mỗi hàng được xác định bởi max-contentmục lưới ( ) cao nhất .
Chiều cao tối đa của các hàng đó trở thành chiều dài của 1fr.
Đó là cách 1frtạo các hàng có chiều cao bằng nhau trong vùng chứa lưới.
Như đã lưu ý trong câu hỏi, các hàng có chiều cao bằng nhau là không thể với flexbox.
Các mục linh hoạt có thể có chiều cao bằng nhau trên cùng một hàng, nhưng không phải trên nhiều hàng.
Hành vi này được xác định trong thông số flexbox:
Trong vùng chứa linh hoạt nhiều dòng, kích thước chéo của mỗi dòng là kích thước tối thiểu cần thiết để chứa các mục linh hoạt trên dòng.
Nói cách khác, khi có nhiều dòng trong vùng chứa linh hoạt dựa trên hàng, chiều cao của mỗi dòng ("kích thước chéo") là chiều cao tối thiểu cần thiết để chứa các mục linh hoạt trên dòng.
Câu trả lời ngắn gọn là cài đặt grid-auto-rows: 1fr;trên bộ chứa lưới giải quyết được những gì được hỏi.
grid-auto-rowcho hàng đó là 2, điều này có nghĩa là kích thước 1fr cho hàng đầu tiên bằng 50px?