Разрыв в строке/столбце CSS Grid для определенных элементов? [дубликат] ⇐ CSS

[Anonymous]

Я создал сетку ниже с помощью CSS Grid, и мне интересно, возможно ли создать зазор только между определенными элементами внутри сетки, а не применять универсальный зазор ко всем элементам сетки. Вот что у меня есть сейчас:

Код: Выделить всё

body {
margin: 40px;
}

.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: [col] 100px [col] 100px [col] 100px;
grid-template-rows: [row] auto [row] auto [row] ;
background-color: #fff;
color: #444;
}

.box {
background-color:#444;
color:#fff;
padding:20px;
font-size:150%;
}
.a {
grid-column: col / span 2;
grid-row: row 1 / 3;
}
.b {
grid-column: col 3 / span 1;
grid-row: row ;
}
.c {
grid-column: col 3 / span 1;
grid-row: row 2 ;
}
.d {
grid-column: col / span 1;
grid-row: row 3;
}
.e {
grid-column: col 2 / span 1;
grid-row: row 3;
}
.f {
grid-column: col 3 / span 1;
grid-row: row 3;
}
.g {
grid-column: col / span 1;
grid-row: row 4;
}
.h {
grid-column: col 2 / span 1;
grid-row: row 4;
}
.i {
grid-column: col 3 / span 1;
grid-row: row 4;
}

Код: Выделить всё

A
B
C
D
E
F
G
H
I

Я хотел бы убрать разрыв между двумя верхними строки с правой стороны и между каждой ячейкой в ​​строках ниже. Я бы хотел оставить ячейки разбитыми, как сейчас, потому что на рабочем столе их макет будет другим. Вот графическое представление того, что я собираюсь сделать:




Подробнее здесь: https://stackoverflow.com/questions/505 ... c-elements