Использование CSS-сеток в WordPress

Итак, я создал сайт и теперь превращаю его в настраиваемую тему WordPress.
Дело в том, что я использовал CSS-сетку для создания галереи, и я хочу сделать ее динамичной. Мне нужно загрузить фотографии (а иногда и видео или GIF-файлы) в WordPress и сделать так, чтобы они помещались в сетку.

Это мой код:

**HTML**
<div class="gallery">
<figure class="figure1">
<img src="img/r1.jpg" class="figure-img">
</figure>

<figure class="figure2">
<img src="img/r2.jpg" class="figure-img">
</figure>

<figure class="figure3">
<img src="img/r3.jpg" class="figure-img">
</figure>

<figure class="figure4">
<img src="img/r4.jpg" class="figure-img">
</figure>

<!-- more figures -->
</div>


**CSS**
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}

.figure-img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0
}

.figure1 {
grid-column: span 1;
}

.figure2 {
grid-column: span 3;
}

.figure3 {
grid-column: span 4;
}

.figure4 {
grid-column: span 4;
}

/* more figures */

Так как некоторые изображения не должны занимать весь ряд, а другие (это немного случайно), я не могу просто использовать обычный плагин галереи.

Я должен добавить, что я новичок, когда дело доходит до php …
Есть идеи?

Спасибо!