html - 我需要使用 css 网格使容器在页面上居中

Question

我想让容器网格 2 居中，两边都有空格在任何屏幕尺寸(响应式)上，但现在发生的是随着屏幕尺寸的减小，侧面空间缩小为零。我想知道如何在不破坏目前已完成的所有工作的情况下解决这个问题。

我做了一个 codepen，无论屏幕的宽度如何，我都需要容器 grid2 居中，两边都有边距。

<div class="grid2">
    <div class="Jumbotext-1">Deliver a unique</div>
    <div class="Jumbotext-2">experience</div>
    <div class="blurb-text">
        We can work together today<br>
        to create an exceptional product<br>
        that screams to the world,<br>
        I belong to you.
    </div>
</div>

.grid2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid red;
max-width: 90rem;
width: 100%;
margin: auto;
padding: 72px 0px 100px;

}

https://codepen.io/Jenson-co-in/pen/BGzgJr

Answer 1

使用自动宽度并将所需的边距(如果您想要固定边距)应用到两侧:

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid red;
  max-width: 90rem;
  width: auto;
  margin: auto 10px;
  padding: 72px 0px 100px;
}

或者您可以为边使用自动边距并且宽度小于 100%(如果您想要固定的响应宽度):

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid red;
  max-width: 90rem;
  width: 90%;
  margin: auto;
  padding: 72px 0px 100px;
}