границы (щели) разных размеров между элементами и группами элементов (с использованием сеток)

Question

требуется разбить строку из 3*N (например, 9) следующим образом:

таблица имеет рамку шириной 3 пикселя
группы по 3 блока имеют между собой границу 2 пикселя
блоки внутри группы имеют между собой границу 1 пиксель

Через сетки я делаю следующим образом:

* {
  box-sizing: border-box;
}

.table {
  display: grid;
  grid-template: 1fr/repeat(3, 1fr);
  grid-gap:  2px;
  width: 300px;
  height: 50px;
  border: 3px solid black;
  background: black;
}

.cage {
  display: grid;
  grid-template: 1fr/repeat(3, 1fr);
  grid-gap: 1px;
  width: 100%;
  height: 100%;
}

.cage div {
  display:  flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: white;
}

<div class = 'table'>
  <div class = 'cage'>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class = 'cage'>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
  <div class = 'cage'>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </div>
</div>

Все замечательно, но...

такой вопрос - а можно ли ли как-то с помощью css сделать это не разбивая элементы на группы?

т.е. как то объяснить стилям правила для щелей

* {
  box-sizing: border-box;
}

.table {
  display: grid;
  grid-template: 1fr/repeat(9, 1fr);
  grid-gap: 2px;
  width: 300px;
  height: 50px;
  border: 3px solid black;
  background: black;
}

.table div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: white;
}

<div class = 'table'>
  <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>

Answer 1

Да, с помощью псевдокласса nth-child(3n) . Где 3n будет означать для каждого третьего.

https://jsfiddle.net/vdsn5kL4/

* {
        box-sizing:     border-box;
}

.table {
        display:              grid;
        grid-template:  1fr/repeat(9, 1fr);
    
    width:          300px;
    height:         50px;
    
    border:         3px solid black;
    background:     black;
}

.table div {
        display:                flex;
        justify-content:    center;
        align-items:          center;
    
    width:          100%;
    height:         100%;
    border-right: 1px solid black;
    
    background:     white;
}

.table div:nth-child(3n) {
  border-right: 2px solid red;
}

.table div:last-child {
  border-right: none;
}

Answer 2

Если я правильно понял, тогда это делается с помощью nth-child(3n).

* {
  box-sizing: border-box;
}

.table {
  display: grid;
  grid-template: 1fr/repeat(9, 1fr);
  grid-gap: 2px;
  width: 300px;
  height: 50px;
  border: 3px solid black;
  background: black;
}

.table div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: white;
}

.table div:nth-child(3n):not(:last-child) {
  border-right: 1px solid;
}

<div class = 'table'>
  <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>

БЛОГ НА HUSL

границы (щели) разных размеров между элементами и группами элементов (с использованием сеток)

Ответы (2 шт):