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

Question

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

我知道USAboundaries将以一种简化的方式为我工作，但是我如何在网格系统中进行这项工作，因此只要它在网格中达到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>