css - 如何制作一个响应式网格，其中边距随着网格内容保持不变而减少？

Question

我正在尝试制作与此类似的网格：

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

网格周围的边距变窄，网格保持相同的宽度和纵横比，直到它必须通过断点变小。

非常感谢任何见解。

标签： css

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>