Grid-like container with adaptive width

问题

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?

回答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>

回答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.

来源：https://stackoverflow.com/questions/55463210/grid-like-container-with-adaptive-width

标签

css

flexbox

css-grid