Как убрать расстояние между картинками в CSS Grid?

Question

[Lex Fox]

Добрый вечер.
Подскажите пожалуйста, как можно убрать расстояние между картинками в CSS Grid?

Заранее спасибо!

Comments

[Rustam Bainazarov]

Никак в автоматическом режиме. Вам masonry нужен, а не grid. На grid не сделать полноценную masonry-раскладку.

[Lex Fox]

Рустам Байназаров, то есть я не смогу сделать на css grid так:

[Rustam Bainazarov]

Lex Fox, сможете, только сетка будет строиться без учета размеров и соотношений сторон картинок. Делаете вот такую вашу сетку с бесконечным повторением, а картинки внутри на:

[Rustam Bainazarov]

img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center center;
}

[Lex Fox]

Рустам Байназаров, неожиданно. Спасибо большое. Буду читать про masonry-раскладку.

[Rustam Bainazarov]

Lex Fox, masonry-раскладка полноценная — только на JS:
https://masonry.desandro.com/

[Lex Fox]

Рустам Байназаров, мне это применить к каждой картинке? Или он автоматом ко всем img будет применяться?

[Rustam Bainazarov]

Lex Fox, в смысле к каждой картинке или автоматом? Это CSS-правило по селектору. С grid оно не связано, это хак, чтобы картинка полностью заполняла grid-ячейку и была как фон. Только что-то может обрезать нужное, ибо картинка будет тупо выписана в размеры родителя.

[Lex Fox]

Рустам Байназаров, понятно. Спасибо!) Буду экспериментировать. Очень помогли.

[Rustam Bainazarov]

Lex Fox, не за что!

Answer 1

[Антон]