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

Question

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

Шаг 1:

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

output :

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

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

шаг 2:

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

Выход:

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

Answer 1

Вам необходимо установить 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/ на случай, если это поможет