Проводя некоторые экспериментальные операции с CSS Grid Layout , я пытаюсь определить 3 столбцовую сетку , которая двух элементов охватывает, где 1-й элемент охватывает два столбца , а 2-й элемент охватывает третий столбец . Я также пытаюсь сделать эту сетку такой, чтобы элементы в 2/3 экрана заполняли стек сетки вертикально вниз, в зависимости от количества дочерних элементов, которые содержатся в сетке. (Динамически заполняется).
Часть, с которой у меня возникают проблемы, - это моя способность устанавливать значения grid-row-start и grid-row-end для 2-го элемента (в 3-м столбце) таким образом, чтобы он позволял мне охватывать все длина всех строк в сетке (, включая неявно созданные строки ).
В этой скрипке (https://jsfiddle.net/voqgxz53/8/) я демонстрирую способность иметь элемент № 3 для всех явно определенных строк, однако, как вы можете видеть, неявный четвертая строка была создана, но элемент № 3 не охватывает это.
Я знаю, как это сделать, используя окно Flex (я могу создать два элемента одинакового размера в горизонтальном контейнере Flex, где первый элемент - это вертикальный контейнер Flex, динамически заполненный вниз, а второй - один элемент, который подходит к высоте всего вертикального контейнера Flex).
Однако я хочу проверить пределы сетки CSS, поэтому хочу посмотреть, возможна ли такая сетка.
Примечание: я пытался использовать grid-auto-rows, но всякий раз, когда я не явно устанавливаю количество строк, которые моя сетка имеет перед рукой, появляется grid-row-end: -1, в результате чего этот элемент охватывает только один ряд.
Так работает CSS-сетка? Есть ли решение, которое бы сработало, но я просто не понимаю Есть ли вероятность, что это действительно ошибка с макетом CSS Grid ?