Как сделать так, чтобы столбцы в строке соответствовали ширине столбца строки выше в сетке

Question

Я пытаюсь воссоздать табличный эффект с помощью flexbox или любого типа css системы сетки, где div / ячейки соответствуют ширине dev / ячейки в следующей строке независимо от размера контента, мой текущий код состоит из двух строк делений с flex на контейнере и flex: 1 в ячейке:

<div class="b-grid__row">
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <a href="" class="b-grid__link">
            tretregerg
        </a>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            1rgeerger
        </p>
    </div>   
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">

        </p>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            Olympia Exhibition Centre reggergreegr
        </p>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            Brintex Eventser gergrege
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            Jane Smith fgdfdgfdg
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            jane.smith@brintexevef gfdgdfgfdgts.co.uk
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            01959 525717 dfgdfgdf gdfgd
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
    </div>  
</div>

<div class="b-grid__row">
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <a href="" class="b-grid__link">
            London wine Fair 2020
        </a>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            18/05/2020
        </p>
    </div>   
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            20/05/2020
        </p>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            Olympia Exhibition Centre
        </p>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            Brintex Events
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            Jane Smith
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            jane.smith@brintexevents.co.uk
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <p class="b-grid__content">
            01959 525717
        </p>
    </div> 
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
    </div>  
     <div class="b-grid__column-cell b-grid__column-cell--white">
        <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
    </div>  
</div>


.b-grid__row {
    width: 100%;
    display: flex;
}
.b-grid__column-cell {
    display: flex;
    flex: 1;        
}

Вот как это выглядит в данный момент:

И это то, что мне нужно для этого:

Есть ли способ достичь этого, сохраняя ячейки в отдельных строках?

Просто чтобы заметить, что они должны хранить отдельные упаковщики строк, все не могут быть в одном контейнере

Спасибо за любую помощь

Answer 1

Это макет таблицы:

.container {
  display:table;
}

.b-grid__row {
  display: table-row;
}

.b-grid__column-cell {
  display: table-cell;
  border:2px solid transparent;
  padding:5px;
  background:#fff padding-box;
  vertical-align:middle;
}
.b-grid__column-cell > * {
  margin:0;
}

body {
 background:grey;
}

<div class="container">
<div class="b-grid__row">
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <a href="" class="b-grid__link">
            tretregerg
        </a>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      1rgeerger
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">

    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      Olympia Exhibition Centre reggergreegr
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      Brintex Eventser gergrege
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      Jane Smith fgdfdgfdg
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      jane.smith@brintexevef gfdgdfgfdgts.co.uk
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      01959 525717 dfgdfgdf gdfgd
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
  </div>
</div>

<div class="b-grid__row">
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <a href="" class="b-grid__link">
            London wine Fair 2020
        </a>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      18/05/2020
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      20/05/2020
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      Olympia Exhibition Centre
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      Brintex Events
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      Jane Smith
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      jane.smith@brintexevents.co.uk
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <p class="b-grid__content">
      01959 525717
    </p>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
  </div>
  <div class="b-grid__column-cell b-grid__column-cell--white">
    <a href="" class="l-header__user-link">
            {{ ui.icon('logout', '20', 'xx', 'one', 'l-header__logout', 'Logout') }}
        </a>
  </div>
</div>
</div>