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

Posted 2023-02-24

【中文标题】用于 Django 中动态内容的 CSS Grid/Flexbox

【英文标题】：CSS Grid/Flexbox for dynamic content in Django

【发布时间】：2020-03-25 13:30:44

【问题描述】：

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

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

【参考方案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>