I have a layout that consists of rows that contain columns (they are all divs). I want to create the illusion of a column based table, even though I am using rows.
I want each column in a row to match the corresponding column in another row’s width. So for example, column 2 in row 1 is 300px, therefore column 2 in row 2 is also 300px. But column 1 or 3 could be other widths (but equal to their corresponding column).
The tricky part is that the columns can be different widths depending on content in them, so I can just give them specific widths to start.
Is this possible with CSS grid of flex box? Or does the fact these columns are in separate rows make it impossible without javascript?
EDIT: clarification
2
Answers
CSS Tables can do that.
With flex-box you can use
flex-grow
on the child elements using a class or id to specify the particular child element you wish to affect.