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

【问题标题】：CSS Grid/Flexbox for dynamic content in Django用于 Django 中动态内容的 CSS Grid/Flexbox
【发布时间】：2020-03-25 13:30:44
【问题描述】：

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

我知道{% for post in posts %} 会以直下列表的方式为我工作，但我怎样才能在网格系统中使它工作，所以只要它在网格中达到 4 就会换行。我被难住了，还没有在网上找到任何关于如何做到这一点的信息。

【问题讨论】：

标签： css django flexbox django-templates grid

【解决方案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>

【讨论】：