让图片一行只排列4个，超出的自动在下一行展示，每行只能展示4个，一次类推…… 当有多行时最外层div高度需自适应，这该怎么做好？

Question

让图片一行只排列4个，超出的自动在下一行展示，每行只能展示4个，一次类推……
当有多行时最外层div高度需自适应，实现这两个这该怎么做才好呢？

Answer 1

这是一个常见的布局

<div class="grid">
  <div class="grid__cell">
    <div>A</div>
  </div>
  <div class="grid__cell">
    <div>B</div>
  </div>
  <div class="grid__cell">
    <div>C</div>
  </div>
  <div class="grid__cell">
    <div>D</div>
  </div>
  <div class="grid__cell">
    <div>E</div>
  </div>
</div>

@mixin grid($columns: 3, $gutter-size: 16px) {
  display: flex;
  flex-flow: row wrap;
  margin: calc(#{ $gutter-size } / -2);
  > .grid__cell {
    flex: 0 0 calc(100% / #{ $columns });
    padding: calc(#{ $gutter-size } / 2);
    box-sizing: border-box;
  }
}

.grid {
  @include grid(4, 16px);
  background: lightgray;
  > .grid__cell > div {
    background: lightgreen;
  }
}

https://codepen.io/hungtcs-th...

Answer 2

https://jsbin.com/ziponureyi/...,output