Как выровнять блоки по высоте в grid?

Question

[holypower77]

Как сделать так, чтобы все блоки были одинаковой высоты?

<ul className="products">
  <li>
    <a>...content</a>
  </li>
</ul>

.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    grid-auto-rows: auto;
    list-style: none;
    grid-gap: 15px;
}

Comments

[poniyur]

grid-auto-rows: 1fr попробуйте

[Martovitskiy]

название нужно либо фиксировать по высоте, либо обрезать и вставлять "..."

Answer 1

[MamaLuyba]

варианты:
1) задать фиксированную высоту всем блокам. самый оптимальный вариант, ибо, насколько я вижу, проблема только с длинными названиями фирм и товаров. нужно прикинуть максимальное количество строк и выставить нужную высоту блока.
2) задать фиксированную высоту названию фирм/товаров и добавить overflow. тогда названия скроются под скролл. что будет смотреться тупо.
3) обрезать названия фирм/товаров через text-overflow: ellipsis . что тоже будет смотреться не очень.