Код полностью перерабатывает расположение изображений внутри стандартной плитки GetCourse: формирует три колонки, задаёт разную высоту элементов, добавляет одинаковые аккуратные промежутки и автоматически обрезает изображения под форму каждой плитки.

При этом исходные пропорции фотографии не растягиваются. Изображение заполняет отведённую область, а лишняя часть аккуратно обрезается с помощью object-fit: cover.

Вам также не нужно заранее определять точное количество изображений. Добавили новые фотографии в стандартный блок GetCourse — галерея автоматически продолжается ниже.

В шаблоне предусмотрены:

• нестандартная журнальная раскладка изображений;
• три колонки на компьютере;
• плитки разной высоты;
• сочетание крупных и компактных изображений;
• одинаковые промежутки между фотографиями;
• автоматическая обрезка изображений без искажения пропорций;
• центрирование фотографии внутри плитки;
• единый размер колонок независимо от исходного размера файлов;
• возможность использовать вертикальные, горизонтальные и квадратные фотографии;
• автоматическое продолжение галереи при добавлении новых изображений;
• повторяющийся рисунок раскладки — новые фотографии продолжают композицию автоматически;
• отсутствие необходимости прописывать стили отдельно для каждой новой картинки;
• стандартное открытие изображений через галерею GetCourse сохраняется;
• возможность в любой момент заменить фотографию через редактор страницы;
• адаптация под планшеты;
• отдельная двухколоночная раскладка для смартфонов;
• автоматическое уменьшение расстояний между плитками на небольших экранах.

Можно добавлять любое количество изображений
Для красивого отображения рекомендуется использовать 6, 9, 12 или 15 изображений