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

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>