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

Question

[Cheizer]

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


Сделал пока так для дочерних элементов, но это не работает для адаптивности

.item:nth-child(3n){
  border-right:0px;
}
.item:nth-last-child(-n+3){
  border-bottom:0px;
}

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

Вот модель
https://codepen.io/Cheizer/pen/qBBvEEV

Answer 1

[profesor08]

<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;
}

Comments

[Cheizer]

Ого, это что то новенькое, смотрю поддержка grid-template-columns браузерами не совсем но и не плоха, только IE 11 не тянет, жаль. Но главное не адаптивно это все, нужно через медиа запросы я так понимаю делать адаптивность с этим вариантом.

[Алекс Глебов]

Если количество колонок не кратно 3, то будут красные квадраты на пустых местах.

[Алекс Глебов]

нужно через медиа запросы я так понимаю делать адаптивность с этим вариантом

С любым нужны медиа запросы.

[Cheizer]

Алекс Глебов, нет не с любым, responsive верстка не подразумевает медиа запросы, сделал пока так, https://codepen.io/Cheizer/pen/bLrrzQ

[Алекс Глебов]

Роман Кузнецов, не правда https://habr.com/ru/post/148116/

[Cheizer]

Алекс Глебов, хорошо.