Блог

Главная - Вопросы по программированию - css в области сетки не работает в Chrome корректно

css в области сетки не работает в Chrome корректно

#html #css

#HTML #css

Вопрос:

У меня проблема с областью сетки и chrome, она работает некорректно, как в firefox. у кого-нибудь есть решение?

Я не получил никакого ответа, обычно мы должны видеть 5 строк и 2 столбца, но в chrome первая строка переходит на вторую строку, а не в firexfox и edge…

https://codepen.io/tagline2020/pen/qBNNzYQ

»’

 <div class="page-width-grid-10">
  <div class="product-1"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-2"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-3"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-4"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-5"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-6"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-7"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-8"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-9"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
  <div class="product-10"><img src="https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg"/></div>
</div>

»’

»’

 .page-width-grid-10{
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  grid-template-areas: 
  "product-1 product-2 product-3 product-4 product-5"
  "product-6 product-7 product-8 product-9 product-10";
  margin-left: 8%;
  margin-right: 8%;
  
}

.page-width-grid-10 img{
  width: 100%;
}

.product-1{
  grid-area: product-1;
  border: #d4b26b solid 1px;
}
.product-2{
  grid-area: product-2;
  border: #d4b26b solid 1px;
}
.product-3{
  grid-area: product-3;
  border: #d4b26b solid 1px;
}
.product-4{
  grid-area: product-4;
  border: #d4b26b solid 1px;
}
.product-5{
  grid-area: product-5;
  border: #d4b26b solid 1px;
}
.product-6{
  grid-area: product-6;
  border: #d4b26b solid 1px;
}
.product-7{
  grid-area: product-7;
  border: #d4b26b solid 1px;
}
.product-8{
  grid-area: product-8;
  border: #d4b26b solid 1px;
}
.product-9{
  grid-area: product-9;
  border: #d4b26b solid 1px;
}.product-10{
  grid-area: product-10;
  border: #d4b26b solid 1px;
}

»’

Комментарии:

1. grid-template-rows: 20% 20% 20% 20% 20%; <— вам нужны две строки, так зачем определять 5?

2. это ошибка, но проблема остается той же, если бы я поставил только 2, что бы вы поставили? спасибо

3. ну, ничего не ставьте, просто удалите это

4. 🙂 о, здорово работает! спасибо 🙂

5. я не понимаю, почему в этом видео он работает идеально… youtube.com/watch?v=EFafSYg-PkI но спасибо вам