Cheizer
@Cheizer

Как сделать сложную grid сетку?

Друзья, есть непростая для меня тема, сделать сетку, у которой внутренние элементы имеют бордер только между собой, по краям бордеров быть не должно, и все это нужно адаптивно.
Вот модель сетки
5dd5444a00449004854978.png

Сделал пока так для дочерних элементов, но это не работает для адаптивности
.item:nth-child(3n){
  border-right:0px;
}
.item:nth-last-child(-n+3){
  border-bottom:0px;
}


Есть ли способ реализовать такую сеть при адаптивности?

Вот модель
https://codepen.io/Cheizer/pen/qBBvEEV
  • Вопрос задан
  • 137 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>


div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2px;
  background: red;
}

span {
  background: white;
  height: 100px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы