как сделать сетку как таблицу - PullRequest
Новая
       59

как сделать сетку как таблицу

0 голосов
/ 20 сентября 2019

Необходимо отобразить сетку в формате таблицы, например, у меня есть две строки, за которыми следует следующая строка: css:

Шаг 1: 

.grid-container {
  display: grid;
  grid-template-columns: auto;
  background-color: #2196F3;
  padding: 10px;
}

output :

enter image description here

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

У меня есть одна идея, основанная на заказе, которая будет отображать сетку, как любая другая опция для визуализации,

шаг 2: 

.grid-container {
      display: grid;
      grid-template-columns: auto auto;
      background-color: #2196F3;
      padding: 10px;
    }

Выход:

enter image description here

Я ожидал, как показано ниже:

enter image description here

1 Ответ

1 голос
/ 20 сентября 2019

Вам необходимо установить grid-auto-flow на column, а затем изменить grid-template-columns на grid-template-rows (потому что вы сейчас заполняете сетку по столбцам).

Другими словами, попробуйте это в своем CSS: 

.grid-container {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  background-color: #2196F3;
  padding: 10px;
}

JSFiddle на https://jsfiddle.net/h8qm5sku/3/ на случай, если это поможет

...