用于 Django 中动态内容的 CSS Grid/Flexbox

Question

我在一个元素中使用 Django，我有一个线框 CSS 网格布局，目前横跨 4 个，我想知道如何使用 Django 将这些线框组件替换为动态内容。

我知道 {% for post in posts %} 会以直接向下列表的方式为我工作，但我怎样才能让它在网格系统中工作，所以它会中断每当它在网格中达到 4 时就换一条新线。我很困惑，在网上找不到任何关于如何做到这一点的信息。

Answer 1

对于数据插入，您仍然需要使用 {% for post in posts %} 因为分解将在浏览器中呈现时照顾您的 css。 因为从数据输出的 Angular 来看， ListView 和 GridView 没有区别，只是可视化方式不同而已

<div class="your-grid">
{% for post in posts %}
    <div class="grid-element">
        {{ post }}
    </div>
{% endfor %}
</div>

<style>
.your-grid
{
  display: grid;
  grid-template-columns: repeat(1fr, 4);
  grid-gap: 8px;
}
<style>