Почему grid-template-rows работает только для первой строки элементов?

Question

[QnaTwitt]

Подскажите пожалуйста почему

grid-template-columns: repeat(auto-fit, minmax(171px, 1fr));
    grid-template-rows: repeat(1, minmax(171px, min-content));

Работает только для первой строки элементов, вот на скринах видно



В финале должно вот так получится...

Answer 1

[Ankhena]

grid-auto-rows: minmax(170px, min-content);

Comments

[QnaTwitt]

Спасибо, а не могли бы подсказать как можно расположить черные линии между блоками, сейчас пробую через nth-child(even), не совсем то пока что получается...

[Ankhena]

QnaTwitt, even это нечетные элементы.
Я не очень поняла, что вам нужно сделать и что вы делаете.

[QnaTwitt]

У меня сейчас вот так, нужно эти черные маленькие линии сделать как в дизайне...

[Ankhena]

QnaTwitt, вариантов несколько
- немножко задвинуть за край и скрыть overflow и компенсировать.
- писать nth-child для разных media
- вычислять на js

Но всё это не имеет отношения к текущему вопросу.

Answer 2

[imko]

Потому что ты указал в значении только один ряд

Comments

[QnaTwitt]

А как правильно это сделать. если я не знаю сколько в будущем может быть таких рядов?

[QnaTwitt]

Я и так пробовал, но нечего не меняется

grid-template-columns: repeat(auto-fill, 171px);
    grid-template-rows: repeat(auto-fill, 171px);

Всё равно только для первого ряда срабатывает...

[imko]

QnaTwitt, grid-auto-rows: 1fr

[imko]

QnaTwitt, auto-fill и fit без известной высоты блока тебе ничего не дадут