有什么方法可以在树枝模板中制作网格样式列表？

Question

我正在尝试为 WordPress 使用 twig 制作模板的 3x3 网格，我正在使用 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>

有什么方法可以在树枝模板中制作网格样式列表？

Any way to make a grid style list in twig templates?

html

wordpress

grid

twig