То, что вы хотите, называется Masonry Grid. Нормально на чистом CSS это сделать невозможно.
Inline-block или column-count — полурешения со своими недостатками. На grid это тоже не сделать. Это все будут псевдо-реализации Masonry с ограничениями по высоте отдельных блоков или с непонятным порядком элементов, ограничениями по высоте сетки и т. д.
Для этого есть JS-плагины, самый популярный из которых — https://masonry.desandro.com/. Настройка этого плагина занимает минуту. У него всё есть, включая адаптивность.
Anton Litvinenko, во-первых, можно обратиться к экземпляру Swiper и получить реальный индекс, а во-вторых, Swiper, помимо класса, ставит слайду ещё и data-атрибут, где указывает значение его реального индекса (data-swiper-slide-index="X").
Вот простейший пример второго подхода. Через CSS с помощью before с контентом из атрибута для слайдов-дубликатов вывожу их реальный индекс:
Так что у Swiper получить реальный индекс проще простого.
В связке со Swiper и Fancybox 3 я делал, например, так: для каждого слайдера генерировал галерею через API Fancybox, а по клику на слайд Swiper'а получал его реальный индекс и открывал нужную галерею с этим индексом.
Разницы не будет, разве что только в возможностях и скорости. Будет большая разница, если используются сильно разные версии библиотек или если плагин косой.
Лучше, конечно, делать сборку, чем использовать плагины.
Не совсем хорошо, всё же use гораздо более гибкий. Вставка через img, логично, убивает всякую возможность стилизации SVG через CSS, для чего и используют сейчас SVG-спрайты для механизма use.
А у автора вопроса проблема лишь в том скорее всего, что он у SVG забыл заменить родной display: inline.
109k4, вы что-то путаете понятия пиксель-в-пиксель и масштабирование под. Вкратце, нельзя так делать. Автор ответа всё верно написал.
Посмотрите любой нормальный крупный сайт, у которого есть фиксированная максимальная ширина контентной области. Никто ничего не масштабирует, т. к. это неверный подход.
Гугл оценивает только десктоп (1360 пикселей раньше было) и мобильную вёрстку. Если это есть, то всё нормально. Промежуточные диапазоны ему не интересны.
Inline-block или column-count — полурешения со своими недостатками. На grid это тоже не сделать. Это все будут псевдо-реализации Masonry с ограничениями по высоте отдельных блоков или с непонятным порядком элементов, ограничениями по высоте сетки и т. д.
Для этого есть JS-плагины, самый популярный из которых — https://masonry.desandro.com/. Настройка этого плагина занимает минуту. У него всё есть, включая адаптивность.