Как работает CSS GRID?

Question

[stpnov]

Есть ячейки grid.

grid: repeat(auto-fill, minmax(44px, 1fr))/repeat(auto-fit, minmax(44px, 1fr));

В них одна ячейка растянута, все хорошо.

grid-column-end: span 5;
    grid-row-end: span 3;

Но если мы эту ячейку растянем на максимальное кол-во ячеек по ширине, то они сжимаются, хотя у них установлен минимальный размер, не пойму как это работает.



Цель вопроса, как сделать так, что бы ячейки не сжимались

Comments

[Рома Зварич]

stpnov , выложите пример кода на CodePen, чтобы можно было пощупать

[stpnov]

Рома Зварич, Выложил пример CodePen

[Рома Зварич]

Но если мы эту ячейку растянем на максимальное кол-во ячеек по ширине, то они сжимаются, хотя у них установлен минимальный размер, не пойму как это работает

Непонятно написано. В примере видно, что один элемент занимает полную ширину и ничего вроде не сжимается.

[stpnov]

Рома Зварич, растянутая ячейка в высоту размером с одну ячейку, а должен быть как 3 таких.

Answer 1

[Рома Зварич]

Цель вопроса, как сделать так, что бы ячейки не сжимались

UPD: Нужно задать высоту строк, добавляемых автоматически через grid-auto-rows

Результат:
https://codepen.io/hisbvdis/pen/RwbpPbj

Comments

[stpnov]

но проблема в том, что у меня количество ячеек по высоте меняется :с

[Рома Зварич]

stpnov, обновил ответ. Оно?