Grid-like container with adaptive width - css

Question

I would like to have container, that satisfies following conditions:
it has 2 rows and unlimited amount of columns
all items inside it are one-word text elements, that have their width
all items inside it are equal width, defined by the widest element (longest word)
I was thinking about using a flexbox. Since all of the items have known height (because they are one line of text), I can define wrappable container like this:
display: flex;
flex-flow: column wrap;
height: 100px;
All items inside the same column are equal in width. But I want all of the items have the same width. Should I use grid? If yes, how?

Answer 1

You can try CSS grid like below:
.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

If you want all the items to have the same width, you need to define their width within their class.
.container{
display: flex
height: 100px
}
.container__item{
width: 20px
height: 100%:
}
Change the width to your pleasure.