Can I create a CSS flexbox table where the rows/ columns line up?

Question

We are creating a comparison table in VueJS using dynamic data. The number of items being compared can vary.

The data structure is like this:

• Items
  • Name
  • Summary
  • Features
    • Text

We want to create a table in VueJS where the columns are equal width & the rows all line up.

+------------+------------+------------+------------+
|Item 1      |Item 2      |Item 3      |Item 4      |
|            |            |            |            |
|Foo bar oof |Rab foo     |Bar rab abr |Oof         |
|rab ofo     |            |Foo oof ofo |            |
|            |            |            |            |
+------------+------------+------------+------------+
|Feature 1   |Feature 1   |Feature 1   |Feature 1   |
|            |            |            |            |
|Bar rab abr |Foo oof ofo |Oof Foo Bar |Rab oof bar |
|foo bar oof |Rab foo     |Bar rab abr |oof         |
|rab ofo     |            |Foo oof ofo |            |
|            |            |            |            |
+------------+------------+------------+------------+
|Feature 2   |Feature 2   |Feature 2   |Feature 2   |
|            |            |            |            |
|Foo oof ofo |Oof foo     |Bar rab abr |Ofo rab ofo |
|rab oof bar |            |oof bar rab |bar         |
|            |            |            |            |
+------------+------------+------------+------------+

Originally I thought of using <table> but the data is being generated in columns rather than rows so it's hard to dynamically generated.

I then wondered if it was possible to use flex so the content could be generated one column at a time & then formatted into a table. So far I haven't had any luck with this approach as we need each row to be the height of the maximum content.

Here is a flexbox example that random generates the number of items/ content: https://jsfiddle.net/BaronGrivet/rwhebczL/1/

Is it possible to use flexbox to achieve what we want to?

If not what is the best approach with the data structure we have?

Answer 1

You can achieve this with CSS grid in case you can put all the elements inside the same wrapper (you remove the .item wrapper).

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*3 items*/
  grid-template-rows: repeat(5, auto); /*title  + 4 feature*/
  grid-auto-flow: column; /*we fill column first*/
}

Full code

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /*3 items*/
  grid-template-rows: repeat(5, auto); /*title  + 4 feature*/
  grid-auto-flow: column; /*we fill column first*/
  
  grid-gap:5px;
}
p {
 margin:0;
}

<h2>Compare Items:</h2>
<div class="wrapper">
  <div class="child">
    <h3>and damn </h3>
    <p>milk like me yours wind go but for yard want that what yours </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>like their what makes want can lalala you you all that want they milk warm thing crazy but  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>time la boys lala milk but all know up it want are makes to makes i makes charge brings teach for you wind what like way wind i my waiting up boys than lose know you want go for yours than know the than better like time charge than i me </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>to milk but all boys are teach teach lose guys go like guys to but milk makes waiting guys charge think are wind way are boys makes </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>its all are it know warm makes thing way what lose waiting and milk their shake it for my that teach want thing that way guys damn know its crazy can right their guys better it to but yours </p>
  </div>
  <div class="child">
    <h3>yours better </h3>
    <p>up thing makes wind the think but to have want go i wind charge waiting lalala brings makes teach think yard all warm want they go lalala boys and for time are boys and their minds thing makes are brings la warm me for the yard its guys its know know
      teach wind than minds i my for and are </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>what minds  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>wind crazy their yard want shake that have but brings crazy right they i charge its but they guys they i like it waiting want right its warm the are guys time yours can milk all for up </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>my know milk minds waiting i lalala think are what but warm but its like up thing it you but shake teach are la you what its and lala la for guys but my that it yard </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>for milk the than time go warm lalala damn la boys you it minds the time </p>
  </div>
  <div class="child">
    <h3>its yours </h3>
    <p>makes minds i warm it you wind damn charge you minds minds know teach right they la that think they minds lalala wind me waiting minds right their up my for </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>guys lala wind yard know  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>better go its shake yard the its they what can that lose the to waiting than guys than right their la minds but i are time better boys makes to boys want lalala crazy they but what waiting but i shake shake crazy than guys better that </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>are right teach the time me lalala what thing up brings wind thing to thing better thing have their crazy makes than yard have i warm to and guys waiting all guys guys better and think right my yard but its makes guys you all charge warm </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>lose know but go than charge its go brings lalala up brings they yours you all waiting damn to think teach lose damn go what but boys teach la have are they it i brings minds time </p>
  </div>
</div>

If the number of items (columns) is dynamic you can use:

grid-auto-columns: 1fr;

.wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: repeat(5, auto); /*title  + 4 feature*/
  grid-auto-flow: column; /*we fill column first*/
  
  grid-gap:5px;
}
p {
 margin:0;
}

<h2>Compare Items:</h2>
<div class="wrapper">
  <div class="child">
    <h3>and damn </h3>
    <p>milk like me yours wind go but for yard want that what yours </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>like their what makes want can lalala you you all that want they milk warm thing crazy but  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>time la boys lala milk but all know up it want are makes to makes i makes charge brings teach for you wind what like way wind i my waiting up boys than lose know you want go for yours than know the than better like time charge than i me </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>to milk but all boys are teach teach lose guys go like guys to but milk makes waiting guys charge think are wind way are boys makes </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>its all are it know warm makes thing way what lose waiting and milk their shake it for my that teach want thing that way guys damn know its crazy can right their guys better it to but yours </p>
  </div>
  <div class="child">
    <h3>yours better </h3>
    <p>up thing makes wind the think but to have want go i wind charge waiting lalala brings makes teach think yard all warm want they go lalala boys and for time are boys and their minds thing makes are brings la warm me for the yard its guys its know know
      teach wind than minds i my for and are </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>what minds  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>wind crazy their yard want shake that have but brings crazy right they i charge its but they guys they i like it waiting want right its warm the are guys time yours can milk all for up </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>my know milk minds waiting i lalala think are what but warm but its like up thing it you but shake teach are la you what its and lala la for guys but my that it yard </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>for milk the than time go warm lalala damn la boys you it minds the time </p>
  </div>
  <div class="child">
    <h3>its yours </h3>
    <p>makes minds i warm it you wind damn charge you minds minds know teach right they la that think they minds lalala wind me waiting minds right their up my for </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>guys lala wind yard know  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>better go its shake yard the its they what can that lose the to waiting than guys than right their la minds but i are time better boys makes to boys want lalala crazy they but what waiting but i shake shake crazy than guys better that </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>are right teach the time me lalala what thing up brings wind thing to thing better thing have their crazy makes than yard have i warm to and guys waiting all guys guys better and think right my yard but its makes guys you all charge warm </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>lose know but go than charge its go brings lalala up brings they yours you all waiting damn to think teach lose damn go what but boys teach la have are they it i brings minds time </p>
  </div>
  <div class="child">
    <h3>its yours </h3>
    <p>makes minds i warm it you wind damn charge you minds minds know teach right they la that think they minds lalala wind me waiting minds right their up my for </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>guys lala wind yard know  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>better go its shake yard the its they what can that lose the to waiting than guys than right their la minds but i are time better boys makes to boys want lalala crazy they but what waiting but i shake shake crazy than guys better that </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>are right teach the time me lalala what thing up brings wind thing to thing better thing have their crazy makes than yard have i warm to and guys waiting all guys guys better and think right my yard but its makes guys you all charge warm </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>lose know but go than charge its go brings lalala up brings they yours you all waiting damn to think teach lose damn go what but boys teach la have are they it i brings minds time </p>
  </div>
</div>

<div class="wrapper">
  <div class="child">
    <h3>and damn </h3>
    <p>milk like me yours wind go but for yard want that what yours </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>like their what makes want can lalala you you all that want they milk warm thing crazy but  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>time la boys lala milk but all know up it want are makes to makes i makes charge brings teach for you wind what like way wind i my waiting up boys than lose know you want go for yours than know the than better like time charge than i me </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>to milk but all boys are teach teach lose guys go like guys to but milk makes waiting guys charge think are wind way are boys makes </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>its all are it know warm makes thing way what lose waiting and milk their shake it for my that teach want thing that way guys damn know its crazy can right their guys better it to but yours </p>
  </div>
  <div class="child">
    <h3>yours better </h3>
    <p>up thing makes wind the think but to have want go i wind charge waiting lalala brings makes teach think yard all warm want they go lalala boys and for time are boys and their minds thing makes are brings la warm me for the yard its guys its know know
      teach wind than minds i my for and are </p>
  </div>
  <div class="child">
    <h4>Feature 1</h4>
    <p>what minds  </p>
  </div>
  <div class="child">
    <h4>Feature 2</h4>
    <p>wind crazy their yard want shake that have but brings crazy right they i charge its but they guys they i like it waiting want right its warm the are guys time yours can milk all for up </p>
  </div>
  <div class="child">
    <h4>Feature 3</h4>
    <p>my know milk minds waiting i lalala think are what but warm but its like up thing it you but shake teach are la you what its and lala la for guys but my that it yard </p>
  </div>
  <div class="child">
    <h4>Feature 4</h4>
    <p>for milk the than time go warm lalala damn la boys you it minds the time </p>
  </div>
</div>