Css-Grid, Grid-auto-rows не работают и страница не отвечает как следует - PullRequest
Новая
       6

Css-Grid, Grid-auto-rows не работают и страница не отвечает как следует

0 голосов
/ 16 февраля 2019

Я слежу за курсом по CSS Grid и не понимаю, почему мой макет не работает так, как показано в курсе.У меня есть 12 div, и если я уменьшу ширину страницы, несмотря на то, что в моем CSS есть опция автоматического генерирования строк, она перестает вести себя отзывчиво.

Это мой index.html 

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 100px;
}

.container>div {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: #ffeead;
}

html,
body {
  background-color: #ffeead;
  margin: 10px;
}

.container>div:nth-child(1n) {
  background-color: #96ceb4;
}

.container>div:nth-child(3n) {
  background-color: #88d8b0;
}

.container>div:nth-child(2n) {
  background-color: #ff6f69;
}

.container>div:nth-child(4n) {
  background-color: #ffcc5c;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

Может кто-нибудь сказать мне, что я делаю неправильно, и почему не отвечает?

Спасибо.

...