css - 将单个元素插入重复网格

Question

我正在为问答页面构建一个 2 列网格布局。我正在使用 Django 并且每个问题都被循环了。我试图在 top2 类中放置一个 Ask Question 按钮。我只想要一个提问按钮，现在每个问题都有一个按钮。

我的问题是，如何将单个元素插入到像这样的重复网格中？

django - 模板

{% for question in questions %}
<div class="top">
    <div class="top1">
        # Stuff here...
    </div>
    <div class="top2">
        <form action="{% url 'question_ask' %}">
            <button class="button3"><span>Ask question</span></button>
        </form>
    </div>
</div>
{% endfor %}

CSS

.top {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 10px;
    grid-row-gap: 30px;
}

Answer 1

你可以使用 forloop.first 变量 关于许多其他阅读 docs for

{% for question in questions %}
<div class="top">
    <div class="top1">
        # Stuff here...
    </div>
    {% if forloop.first %}
        <div class="top2">
            <form action="{% url 'question_ask' %}">
                <button class="button3"><span>Ask question</span></button>
            </form>
        </div>
    {% endif %}

</div>
{% endfor %}