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

Question

[我正在使用Django进行项目，并且具有线框CSS网格布局，目前共有4个，并且我想知道如何使用Django用动态内容替换这些线框组件。

[我知道{% for post in posts %}将以简化的方式为我工作，但是我如何在网格系统中进行这项工作，因此只要网格中的第4行它就会换行。我很困惑，还没有找到任何在线方法。

Answer 1

对于数据插入，您仍然需要使用{% for post in posts %}进行细分，因此在浏览器中渲染时会注意css。因为从数据输出的角度来看，列表视图或网格视图之间没有区别，所以只是其可视化的另一种方式

<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>