html - 如何使一行中的列与网格中上面行的列宽匹配

Question

我正在尝试使用 flexbox 或任何类型的 css 网格系统重新创建表格效果，其中 div / 单元格与下一行中的 devs / 单元格的宽度匹配，无论内容大小如何，我当前的代码是两行带有 flex 的 div单元格上的容器和 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">
            [e-mail]
        </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;        
}

这是它目前的样子：

这就是我需要它做的事情：

有什么方法可以实现这一点，同时将单元格保持在单独的行中？

请注意，这些必须保留单独的行包装，不能全部放在一个容器中

谢谢你的帮助

标签： htmlcssflexboxcss-gridcss-tables

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">
      [e-mail]
    </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>