Как расположить каждый div рядом друг с другом без промежутков между ними ⇐ CSS

[Гость]

Я новичок в сетках и пытаюсь понять, как они работают. Код ниже я скопировал непосредственно из макета сетки MDN — Css. Может ли кто-нибудь помочь мне удалить пустое пространство вокруг каждого элемента div, чтобы их можно было аккуратно сложить, как целевую структуру? Будем благодарны за любую помощь!"

[*]Макет целевой сетки
[*]Мой результат
< /ul>

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

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 500px;
grid-auto-rows: minmax(100px, auto);
}

.one {
grid-column: 1 / 3;
grid-row: 1;
width: 50%;
height: 25%;
background-color: red;
}

.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
width: 50%;
height: 50%;
background-color: blue;
}

.three {
grid-column: 1;
grid-row: 2 / 5;
width: 40%;
height: 75%;
background-color: green;
}

.four {
grid-column: 3;
grid-row: 3;
width: 30%;
height: 25%;
background-color: yellow;
}

.five {
grid-column: 2;
grid-row: 4;
width: 30%;
height: 25%;
background-color: purple;
}

.six {
grid-column: 3;
grid-row: 4;
width: 30%;
height: 25%;
background-color: grey;
}

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

One
Two
Three
Four
Five
Six

I tried to add width and height for each

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

div

but got the same outcome.


Источник: https://stackoverflow.com/questions/781 ... tween-them