CSS-сетка - как сделать так, чтобы все столбцы / строки росли равномерно при переполнении

Question

Я чувствую, что что-то упускаю из-за этого, потому что поведение, которое я наблюдаю, не совсем соответствует.

Я генерирую случайные сетки с помощью JavaScript. Я устанавливаю количество столбцов и строк в сетке, а затем устанавливаю начальное и конечное значения ячеек отдельно. Я хочу, чтобы при переполнении (т. Е. Содержимое ячейки превышало минимальное значение, которое я хочу, 50 пикселей), ячейки растут и ячейки в тех же строках также растут. Смотри эту скрипку

Здесь я использую

grid-template-rows: repeat(4, minmax(50px, auto));

Однако, как вы видите, почему-то растет только 3-й ряд, а не 4-й. Это можно исправить, установив эту строку в

grid-template-rows: repeat(4, minmax(50px, 1fr));

Но это приводит к тому, что все строки растут равномерно, когда происходит это переполнение, а это не то, чего я хочу. Смотрите эту скрипку

Также, как ни странно, работает , когда я переполняю 6-ю ячейку вместо 4-й. Смотрите эту скрипку . 2-й и 3-й ряд растут равномерно, так как 6-я клетка занимает оба. Такое поведение я ожидаю и хочу в первом примере.

Это ошибка? То же самое и в Chrome и Firefox, поэтому я думаю, что мне чего-то не хватает.

Answer 1

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

Вы можете решить эту проблему, просто добавив фантомные элементы для заполнения всех строк: (элементы-заполнители во фрагменте)

При расчете размеров сетки учитываются элементы, которые охватывают только строку. Причина в том, что ограничения, накладываемые этими элементами, менее гибки, чем другие, потому что они могут обрабатываться только в определенной строке.

Позже, элементы, охватывающие 2 ряда, учитываются. При этом, если 2 строки заняты, а элемент выше, чем уже рассчитанное пространство, обе строки растут. Но если есть только одна строка, для которой вычислен beeen-size (поскольку в нем есть элементы), а другой - нет, то лучшим вариантом будет ** сохранить * размерность уже рассчитанной строки и увеличить только другую. один.

body{margin:0;padding:20px;font-size:24px;font-family:sans-serif}
body > div{
  display: grid;
  max-width: 500px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(4, minmax(50px, auto));
  grid-gap: 20px;
}
body > div > div{
  padding: 20px;
  background-color: #CCC;
}
body > div > div:nth-child(1){
  grid-row-start:    1;
  grid-column-start: 1;
}
body > div > div:nth-child(2){
  grid-row-start:    1;
  grid-column-start: 2;
}
body > div > div:nth-child(3){
  grid-row-start:    1;
  grid-row-end:      3;
  grid-column-start: 3;
}
body > div > div:nth-child(4){
  grid-row-start:    3;
  grid-row-end:      5;
  grid-column-start: 2;
}
body > div > div:nth-child(5){
  grid-row-start:    4;
  grid-column-start: 1;
}
body > div > div:nth-child(6){
  grid-row-start:    2;
  grid-row-end:      4;
  grid-column-start: 1;
}

<div class="test">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
  <div>5</div>
  <div>6</div>
  <filler></filler>
  <filler></filler>
  <filler></filler>
  <filler></filler>
</div>

Answer 2

Не думаю, что вам нужно указывать grid-row-end для каждого. Строки также должны иметь одинаковые значения grid-row-start. Надеюсь, что это желаемый результат:

См. Скрипку.