Grid-like container with adaptive width

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?

[Equal height rows / width columns in CSS Grid.](https://stackoverflow.com/q/44488357/3597276) — Michael Benjamin, Apr 01 '19 at 21:03

score 0 · Answer 1 · answered Apr 01 '19 at 20:48

0

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.

answered Apr 01 '19 at 20:48

alex067

3,159
1
11
17

score 0 · Accepted Answer · answered Apr 01 '19 at 20:49

0

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>

answered Apr 01 '19 at 20:49

Temani Afif

245,468
26
309
415

Thanks a lot. I have another problem though. Now I would like to place this grid inside another container, that should show only first two columns of a grid (right below there will be a navigation to change the translation and by this you would be able to see other columns). Is it possible? – quigen Apr 01 '19 at 21:03
@quigen yes it's possible, you can simply make the width of the outer container to be small so you have an overflow that you hide to only show a part of the grid, then you can consider some JS to translate the grid to show the column you want ... I cannot detail such thing in the comment section and I won't edit the answer as it's beyond the question scope but try to do it and if you stil face an issue you can repost another question. – Temani Afif Apr 01 '19 at 21:07
Yes, the problem is that I want the outer container also to be flexible and take as much space as it needs. How can I say that its minimum width should be wide enough to contain two columns of the grid above without using javascript and checking the items width? – quigen Apr 01 '19 at 21:14
@quigen not sure if you can do it without JS, by the way you don't need to check the items width, you only need to get the column width value from the grid (reading the property `grid-template-columns`) since all have the same width – Temani Afif Apr 01 '19 at 21:25

Grid-like container with adaptive width

2 Answers2

Linked