Равномерно распределенные столбцы между строками с использованием сетки / гибкого трубопровода

Рассмотрим следующий фрагмент: 

#container{
  border: solid 1px black;
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
}
<div id="container">
  <div class="row">
    <div class="item">A1111</div>
    <div class="item">B1</div>
    <div class="item">C1</div>
  </div>
  <div class="row">
    <div class="item">A2</div>
    <div class="item">B2222</div>
    <div class="item">C2</div>
  </div>
  <div class="row">
    <div class="item">A3</div>
    <div class="item">B3</div>
    <div class="item">C3333</div>
  </div>  
</div>
Конечным результатом является табличное отображение, где каждый элемент каждой строки равен ширине самого широкого элемента в этом столбце. 
A1111 A2    A3
B1    B2222 B3
C1    C2    C3333

Что замечательно-но мне нужна таблица, выложенная в виде строк...

A1111 B1    C1
A2    B2222 C2
A3    B3    C3333

display: table решает это-но таблица имеет некоторые недостатки вокруг интервалов, выравниваний и так далее. Поэтому сетка и флекс выглядят привлекательно.

Увы, я не могу понять, как получить информацию, изложенную как и хотелось.

Добавление display: grid к .row помогает упорядочить информацию, но не сохраняет равные ширины столбцов.

Содержимое элемента будет изменяться, и поэтому нельзя использовать фиксированную ширину, и не желательно, чтобы сетка/flex охватывала всю страницу/содержащую ширину.

3 3
css css3 flexbox grid-layout

3 ответа:

Вы можете определить, какой столбец должен быть элементом сетки, используя grid-column. Это означает, что строка не требует содержащей строки div.

Рабочий пример...

#container{
  border: solid 1px black;
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 10px;
  padding: 10px;
}

.col1{
  grid-column: 1;
}

.col2{
  grid-column: 2;
}

.col3{
  grid-column: 3;
}
<div id="container">
    <div class="col1">A11111</div>
    <div class="col2">B1</div>
    <div class="col3">C1</div>
    <div class="col1">A2</div>
    <div class="col2">B2222222</div>
    <div class="col3">C2</div>
    <div class="col1">A3</div>
    <div class="col2">B3</div>
    <div class="col3">C33333333</div>
  </div>
</div>
2

Ваша главная проблема заключается в том, что разметка слишком глубока. У вас есть табличная разметка, глубиной в три уровня: таблица, строки и ячейки. Для компоновки сетки вам вообще не нужны элементы "строки".

Когда вы используете display: grid или display: inline-grid на элементе, он делает этот элемент сеточным контейнером. Затем каждый из его дочерних элементов становитсяэлементами сетки . Элементы сетки будут расположены в сетке, определенной их контейнером.

Вы также сказали, что вам нужны столбцы одинаковой ширины. Для этого вам следует: используйте единицу fr вместо auto для размеров столбцов: 
grid-template-columns: repeat(3, 1fr);

... это сделает каждый столбец шириной в одну единицу "дроби".

#container{
  border: solid 1px black;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}
<div id="container">
  <div class="item">A1111</div>
  <div class="item">B1</div>
  <div class="item">C1</div>
  <div class="item">A2</div>
  <div class="item">B2222</div>
  <div class="item">C2</div>
  <div class="item">A3</div>
  <div class="item">B3</div>
  <div class="item">C3333</div>
</div>
0

Есть способ, которым я бы это сделал.

Прикрепленный JSFiddle (щелчок) 

.row {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

.row > .item {
  display:block;
  flex: 1 1;

  border: 1px solid #000;
}

Есть такое замечательное руководствоflex; Нажмите здесь.

-1