Любой способ сделать список стилей сетки в шаблонах веток?

Question

Я пытаюсь сделать сетку 3х3 из шаблона, созданного в веточку для WordPress, я использую for, чтобы показывать медиаплеер для каждого эпизода, который я добавил в данный момент, но он отображается только в списке. формат.

Текущий код:

{% for episode in podcast.episodes({ orderby: "publicationDate", order: "DESC", limit: 200 }) %}
    <div class="width">
        {{ episode.player }}
    </div>
{% endfor %} 

Текущий результат:

Желаемый результат:

Вот как выглядит после применения вашего кода, я предполагаю, что глава 4 выглядит так, потому что у нее нет субтитров.

Answer 1

Предполагая, что в этом шаблоне уже нет CSS классов для сеток - вам нужно добавить свой собственный код CSS.

Чтобы получить сетку из 3 столбцов, вы можете использовать что-то вроде этого:

.movie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}

Я также добавил grid-gap для пробелов.

А затем измените ваш шаблон так:

<div class="movie-grid">
{% for episode in podcast.episodes({ orderby: "publicationDate", order: "DESC", limit: 200 }) %}
    <div class="width">
        {{ episode.player }}
    </div>
{% endfor %}
</div>