Я вважаю, що цього неможливо досягти за допомогою Flexbox, оскільки кожен рядок може бути лише мінімальною висотою, необхідною для розміщення його елементів, але чи можна цього досягти за допомогою новішої CSS Grid?
Щоб було зрозуміло, я хочу однакову висоту для всіх елементів у сітці по всіх рядках, а не лише для кожного рядка. В основному, найвища «клітинка» повинна диктувати висоту всіх комірок, а не лише комірок у його рядку.
Відповіді:
Якщо метою є створення сітки з однаковою висотою рядків, де найвища комірка в сітці встановлює висоту для всіх рядків, ось швидке і просте рішення:
grid-auto-rows: 1frМакет сітки забезпечує одиницю для встановлення гнучких довжин у контейнері сітки. Це frодиниця виміру. Він призначений для розподілу вільного місця в контейнері і чимось аналогічний flex-growвластивості в flexbox.
Якщо ви встановите для всіх рядків у контейнері сітки значення 1fr, скажімо так:
grid-auto-rows: 1fr;... тоді всі рядки будуть однакової висоти.
Насправді це не має сенсу, оскільки frвін повинен розподіляти вільний простір. І якщо кілька рядків мають вміст з різною висотою, то при розподілі простору деякі рядки будуть пропорційно меншими та вищими.
Окрім цього , глибоко в специфікації сітки захований цей маленький самородок:
7.2.3. Гнучкі довжини:
frблок...
Коли доступний простір нескінченний (що трапляється, коли ширина або висота контейнера сітки невизначена),
frдоріжки сітки гнучкого розміру ( ) мають розмір до їх вмісту, зберігаючи відповідні пропорції.Використаний розмір кожної гнучкої доріжки сітки обчислюється шляхом визначення
max-contentрозміру кожної гнучкої розміру доріжки сітки та ділення цього розміру на відповідний коефіцієнт гнучкості для визначення „гіпотетичного1frрозміру”.Максимум з них використовується як дозволена
1frдовжина (фракція гнучкості), яка потім множиться на коефіцієнт гнучкості кожної доріжки сітки, щоб визначити її кінцевий розмір.
Отже, якщо я читаю це правильно, маючи справу з динамічно розмірною сіткою (наприклад, висота невизначена), доріжки сітки (у цьому випадку рядки) мають розмір відповідно до їх вмісту.
Висота кожного рядка визначається найвищим ( max-content) елементом сітки.
Максимальна висота цих рядків стає довжиною 1fr.
Ось як 1frстворюються рядки однакової висоти в контейнері сітки.
Як зазначалося у запитанні, рядки з однаковою висотою неможливі для flexbox.
Елементи гнучкі можуть мати однакову висоту в одному рядку, але не в декількох рядках.
Ця поведінка визначена в специфікації flexbox:
У багаторядковому гнучкому контейнері перехресний розмір кожного рядка є мінімальним розміром, необхідним для розміщення гнучких елементів на рядку.
Іншими словами, коли в контейнері гнучкості на основі рядків є кілька рядків, висота кожного рядка ("розмір перехрестя") є мінімальною висотою, необхідною для міщення елементів гнучкості на рядку.
Коротка відповідь полягає в тому, що налаштування grid-auto-rows: 1fr;на контейнері сітки вирішує те, про що запитували.
grid-auto-rowдля цього рядка - 2, чи означає це, що розмір 1fr для першого рядка дорівнює 50 пікселів?