разбитая сетка и не отвечает - PullRequest
Новая
       9

разбитая сетка и не отвечает

0 голосов
/ 06 ноября 2018 

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 при наименьшем размере

Если я использую карту храма, могу ли я сделать ее отзывчивой? и как это сделать, это нормально, если я использую автозаполнение?

...