Как убрать отступы между div?

Question

[Михаил Трунев]

Ребят беда бедой. У меня используется разметка grid

._div1 {display: grid; grid-template-columns: repeat(1, 1fr); grid-gap: 0; }

Но беда в том что образуются отступы внизу если блок получается меньше. Как это реализовать или как убрать эти отступы что бы блоки примыкали друг к другу? На скрине я показал что именно меня не устраивает.

Comments

[Softlink]

Вы привели не весь код. Как вы делаете сами блоки внутри? Тем, что вы показали, такой раскладки не добиться. Хотя бы потому что repeat(1, 1fr) создаст одну колонку, а не три. Очевидно наличие отступов между блоками, хотя gap: 0;

upd: добавьте для ._block1 height: 100%;

[Сергей delphinpro]

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

Answer 1

[Александр]

Добавьте grid-template-rows: 1fr;

UPD:
grid masonry (работает только в Firefox под флагом); статьи: 1, 2; примеры: 1, 2.

Comments

[Михаил Трунев]

к сожалению это не работает =(

[Александр]

Михаил Трунев, Без кода сложно сказать, что у Вас происходит. Пример можно в песочницу?

[Михаил Трунев]

Александр, Держите

[Александр]

.row2 {
  gap: 10px;
}

.csss2 {
  margin-bottom: 0;
  display: flex;
}

._block1 {
  margin-left: 0;
  margin-right: 0;
}

Можете также добавить margin к .row2. Либо выстроить более верную сетку родительского блока.

[Михаил Трунев]

Александр, вот это я знаю как сделать. а мне бы без вот этих растяжений. что бы как в блоках на windows выводилось. когда блок идет за блоком без растяжек всяких

[Олег]

Михаил Трунев, можете ещё добавить в класс _block1 свойство min-height:100%;

._block1 {
    box-shadow: 0 0 15px -2px rgb(0 0 0 / 10%);
    background-color: #fff;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 10px 10px;
    font-size: 16px;
    min-height: 100%;
}

[Михаил Трунев]

Олег, это знаю =(((( мне нужно что бы не растягивалось((

[Александр]

Михаил Трунев, grid masonry (работает только в Firefox под флагом); статьи: 1, 2; примеры: 1, 2.

Answer 2

[Alex]

https://webformyself.com/css-masonry-s-pomoshhyu-f...