Сетчатый контейнер с адаптивной шириной

Question

Я хотел бы иметь контейнер, который удовлетворяет следующим условиям:

• он имеет 2 строки и неограниченное количество столбцов
• все элементы внутри него являются текстовыми элементами из одного слова,с шириной
• все элементы внутри него имеют одинаковую ширину, определяемую самым широким элементом (самое длинное слово)

Я думал об использовании flexbox.Поскольку все элементы имеют известную высоту (поскольку они представляют собой одну строку текста), я могу определить контейнер для переноса следующим образом:

display: flex;
flex-flow: column wrap;
height: 100px;

Все элементы внутри одного столбца имеют одинаковую ширину.Но я хочу, чтобы все предметы имели одинаковую ширину.Должен ли я использовать сетку?Если да, то как?

Answer 1

Вы можете попробовать CSS сетку, как показано ниже:

.grid {
  display: inline-grid;
  grid-template-rows: 1fr 1fr; /*two equal rows*/
  grid-auto-columns: 1fr; /*all columns will be equal*/
  grid-auto-flow: column;
}

span {
  outline: 1px solid;
  padding: 5px
}

<div class="grid">
  <span>some_text</span>
  <span>text_long</span>
  <span>text</span>
  <span>a</span>
  <span>text</span>
  <span>some_text</span>
  <span>some_looong_text</span>
  <span>some_text</span>
</div>

Answer 2

Если вы хотите, чтобы все элементы имели одинаковую ширину, вам необходимо определить их ширину в пределах их класса.

.container{
display: flex
height: 100px
}

.container__item{
width: 20px
height: 100%:
}

Измените ширину по своему усмотрению.