如何用HTML/CSS实现每行最多3个div自动换行（无JS）

方案1：纯CSS布局（推荐，最简洁） #

利用CSS的Flexbox或Grid布局，完全不需要修改模板的循环逻辑，仅通过样式控制自动换行，是最现代的实现方式。

Flexbox 实现 #

<!-- Django模板部分 -->
<div class="flex-container">
  {% for item in your_items %}
    <div class="item-card">
      <!-- 这里是每个item的内容，比如{{ item.title }} -->
    </div>
  {% endfor %}
</div>

<!-- CSS样式 -->
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 可选：设置item之间的间距 */
}
.item-card {
  flex: 0 0 calc(33.333% - 0.666rem); /* 减去gap的分摊值，避免换行异常 */
  padding: 1rem;
  border: 1px solid #eee;
}
</style>

Grid 实现（更直观） #

<!-- Django模板部分 -->
<div class="grid-container">
  {% for item in your_items %}
    <div class="item-card">
      <!-- 每个item的内容 -->
    </div>
  {% endfor %}
</div>

<!-- CSS样式 -->
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 直接指定3列等宽 */
  gap: 1rem; /* item之间的间距 */
}
.item-card {
  padding: 1rem;
  border: 1px solid #eee;
}
</style>

方案2：Django模板逻辑控制（手动分组） #

如果需要严格按“每3个div包裹在一个行容器里”的结构，可以利用Django模板的forloop内置变量实现分组：

{% for item in your_items %}
  {% if forloop.counter0|divisibleby:3 %}
    <div class="row"> <!-- 每3个item开头新建一行容器 -->
  {% endif %}
  
  <div class="item-card">
    <!-- 每个item的内容 -->
  </div>
  
  {% if forloop.counter|divisibleby:3 or forloop.last %}
    </div> <!-- 每3个item结束或循环最后一行时闭合行容器 -->
  {% endif %}
{% endfor %}

<!-- 可选CSS：给行容器添加间距 -->
<style>
.row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.item-card {
  flex: 1; /* 每行的3个item平分宽度 */
  padding: 1rem;
  border: 1px solid #eee;
}
</style>

说明 #

• forloop.counter0是从0开始的循环计数器，forloop.counter是从1开始的
• divisibleby:3用于判断当前计数器是否能被3整除，以此触发行容器的创建和闭合
• forloop.last确保循环结束时，即使最后一行不足3个item，也能正确闭合行容器

内容的提问来源于stack exchange，提问作者Levis