Если вы предпочитаете решение Javascript, вы можете использовать это:

ерирую таблицу (с vue.js) из объекта, который должен иметь ширину в два столбца. Каждый из столбцов происходит от ключа и значения объекта. Это эквивалентно следующему фактическому HTML:

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Я использую сетку CSS для форматированияdiv в сетку 2x2, которую я ожидал

this is something long on the first row | short 1st row
wazaa 2nd row                           | wazii 2nd row

Код для этого:

#table {
  display: grid;
  grid-template-columns: auto 1fr;
}
<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

Результат не тот, который я ожидаю: два самых глубокихdiv вести себя как они должны за пределамиgrid дисплей: они накладываются друг на друга.

Я хотел, чтобы они унаследовали поведение сетки: выровнять на основе шаблонов столбцов, как они идут. Как этого добиться?

Ответы на вопрос(3)

Ваш ответ на вопрос