Использование системы сеток

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>

Есть изображение из chrome tools

, поэтому вопрос в том, когда я размещу эти коды в Интернете сайт выглядит как неотзывчивый дизайн, даже если я использовал стиль сетки. я делаю что-то не так, но не знаю где.

Answer 1

Ваш код выглядит хорошо, вам ничего не нужно, чтобы он реагировал, просто проанализируйте его, вы создаете сетку из 4 строк, где height три из них имеют 10rem, а другие - auto, а также вы ' re делает 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>