如何在网格内容保持不变的情况下创建边距减少的自适应网格？

Question

我正在尝试制作类似于该网格：

https://masteroverwatch.com/streams/sort/skillrating

栅格周围的边距变窄，栅格保持相同的宽度和纵横比，直到必须通过断点使其绝对变小为止。

任何见解都会受到赞赏。

Answer 1

您应该使用margin: 0 auto;。

这是一个简单的例子：

.container {
  width: 100%;
  background: red;
  height: 100vh;
}

.box {
  width: 400px;
  background: blue;
  height: 100vh;
  margin: 0 auto;
 }

<div class="container"><div class="box"></div></div>