Я получаю дополнительное пространство после содержимого в ячейке с одним столбцом или двумя строками. ⇐ Html

[Anonymous]

У меня есть CSS-сетка из 3 столбцов и 4 строк. Ячейка в первом столбце занимает две строки, и я хочу, чтобы следующая строка находилась сразу после содержимого в этой первой ячейке, но между содержимым и концом ячейки (перед пробелом) есть пробел.

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1.2;
}
.modal {
width: 1024px;
padding-inline: 16px;
}
h3 {
background-color: gray;
}

p {
background-color: Gainsboro;
}

img {
justify-self: center;
}

.guide-grid {
display: grid;
align-items: start;
gap: 24px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto auto auto;
}

.guide-item {
outline: 1px solid green;
background-color: Yellow;
}

.guide-item:nth-child(1) {
grid-column: 1;
grid-row: 1 / span 2;
}

.guide-item:nth-child(2) {
grid-column: 1;
grid-row: 3 / span 2;
}

.guide-item:nth-child(3) {
grid-column: 2;
grid-row: 1;
}

.guide-item:nth-child(4) {
display: block;
grid-column: 2 / span 2;
grid-row: 4;
}

.guide-item:nth-child(5) {
display: block;
grid-column: 3;
grid-row: 1;
}

.guide-image-wrapper {
grid-column: 2 / span 2;
grid-row: 2 / span 2;
outline: 1px solid red;
background-color: LemonChiffon;
justify-self: center;
}

.two-column {
column-count: 2;
gap: 1.5rem;
}

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

Quick Starting Guide
×




Entering colors
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi debitis distinctio est excepturi voluptates, maiores autem sunt dignissimos! Ducimus ipsa voluptate perspiciatis delectus soluta optio quae dolores in adipisci quas. Soluta voluptatum dolores tque ab mollitia quas enim.

Drag & Drop
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi debitis distinctio est excepturi voluptates, maiores autem sunt dignissimos! Ducimus ipsa voluptate perspiciatis delectus soluta optio quae dolores in adipisci quas. Soluta voluptatum dolores atque ab mollitia quas enim.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi debitis distinctio est excepturi voluptates.

Adjusting colors
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi debitis distinctio est excepturi voluptates, maiores autem sunt dignissimos!

Enhanced color space & OKLCH

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi debitis distinctio est excepturi voluptates, maiores autem sunt dignissimos!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi debitis distinctio est excepturi voluptates, maiores autem sunt dignissimos!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi debitis distinctio est excepturi voluptates, maiores autem sunt dignissimos!



Copying color values
Lorem ipsum dolor, sit amet consectetur adipisicing elit.  Animi debitis distinctio est excepturi voluptates, maiores autem sunt dignissimos!

[img]https://placehold.co/450x150/png[/img]



Got It

Как мне стилизовать сетку или ячейку так, чтобы пробел находился прямо под первой ячейкой, без пробела?

Подробнее здесь: https://stackoverflow.com/questions/797 ... o-row-cell