网格布局损坏并且没有响应

Question

html {
  font-size: 12px;
}

html,
body {
  box-sizing: border-box;
}

body {
  margin: 0;
}

section {
  border: 2px solid #a77;
  margin: 1em auto;
  max-width: 625px;
  padding: .5em;
  width: 100%;
}

.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
  grid-gap: 1em;
  grid-template-rows: repeat(auto-fix, auto);
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

.block {
  background-color: #adf;
  border: 1px solid #adf;
  min-height: 100px;
}

.block-item1 {
  grid-row: 1/3;
  grid-column: span 2;
}

.block-item2 {
  grid-row: 1/2;
  grid-column: span 2;
}

.block-item3 {
  grid-row: 2/3;
  grid-column: span 2;
}

.block-item4 {
  grid-row: 1/3;
  grid-column: span 2;
}

.block-item5 {
  grid-row: 1/2;
  grid-column: span 2;
}

.block-item6 {
  grid-row: 2/3;
  grid-column: span 2;
}

.block-item7 {
  grid-row: 1/3;
  grid-column: span 2;
}

.block-item8 {
  grid-column: span 5;
}

.block-item9 {
  grid-column: span 5;
}

<section class="layout-grid">
  <div class="block block-item1">1</div>
  <div class="block block-item2">2</div>
  <div class="block block-item3">3</div>
  <div class="block block-item4">4</div>
  <div class="block block-item5">5</div>
  <div class="block block-item6">6</div>
  <div class="block block-item7">7</div>
  <div class="block block-item8">8</div>
  <div class="block block-item9">9</div>
</section>

所以我有9 div，我尝试使其具有响应性，但似乎自动填充无效。我的布局已损坏，并且div无法缩放，例如：1想要4 div（中等大小），1 div（最小大小）

如果我使用神庙地图，我可以使它响应吗？如果我使用自动填充功能，该怎么办？