css布局-如何实现如下图这种"固定列数,图片等高不等宽"的样式

今天在学习瀑布流布局的时候,去观摩各大图片网站, 然后看到这么如下图的一个布局
一开始撇了一眼,以为是瀑布流, 仔细一瞧发现不是,就试着研究了一下,奈何技术未到家
后面附上html, 求解惑像他这样固定列数,等高不等宽的效果是如何实现的

特点

• 子盒子（item）等高，宽度根据图片自适应，刚好分完父盒子（row）空间
• 最外层容器（container）宽度固定，width: 1200px;
• 每行列数一样

就是这个网站https://tuchong.com/

<div class="container">
  <ul>
    <!-- 行一 -->
    <li class="row">
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
    </li>
    <!-- 行二 -->
    <li class="row">
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
    </li>
    <!-- 行三 -->
    <li class="row">
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
      <div class="item">
        <a class="image"></a>
        <div class="foot">
          <div class="foot-left">
            <a href="javscript:;" class="avatar">头像</a>
            <a href="javscript:;" class="name">张三</a>
          </div>
          <div class="foot-right">
            <a class="icon-like">❤</a>
            <a class="icon-comment">666</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

你可以原则使用不同盒子（div）也可以使用表格（table）来实现，根据图片大小自适应应该可以完成

我觉得display:flex,加flex-wrap:wrap就可以