使用网格系统

Question

.wrappers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 10rem auto 10rem 10rem;
}

.header {
  background: #9575cd;
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="wrappers">

  <header class="header">
    <h1>Earthly Branches </h1>

  </header>
</div>

There is an image from chrome tools

所以问题是当我放置这些代码时，即使我使用了网格样式，网站看起来也像是无响应的设计。我做错了，但我不知道在哪里。

Answer 1

您的代码看起来不错，没有什么需要让它响应只需分析它，您正在制作一个由 4 行组成的网格，其中height 其中三个有10rem，另一个是auto，还有你重新制作 12 个相等的列，你有 header 这是从第一个到最后一个column，所以如果你希望标题适合.wrappers，只需让header 适合所有列，如下所示

.wrappers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 10rem auto 10rem 10rem;
  height: 40rem;
}

.header {
  background: #9575cd;
  grid-column: 1/-1;
  grid-row: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="wrappers">
  <header class="header">
    <h1>Earthly Branches </h1>
  </header>
</div>