如何用CSS让Django页面中多个div元素同行显示？

问题出在你没有给循环输出的.plant元素添加父容器，且之前的Grid属性用错了对象和参数——Grid布局需要作用在父容器上，用grid-template-columns控制列数，而非grid-template-rows。

步骤1：添加父容器包裹循环内容 #

在Django模板的{% for %}标签外层，新增一个容器用来承载布局：

<div class="plants-container">
{% for plant in plants %}
<div class="plant">
    <img src="{{plant.icon}}">
    <div>
        <label>{{plant.common_name}}</label>
        <input type="number" name="percentage"/>
    </div>
</div>
{% endfor %}
</div>

步骤2：修改CSS实现每行两列布局 #

给新增的父容器添加Grid样式，同时调整.plant的属性避免干扰布局：

/* 新增父容器的Grid布局 */
.plants-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行2列，宽度均分 */
    gap: 2rem; /* 列与列、行与行之间的间距 */
    width: 80%; /* 控制整体宽度，可根据需求调整 */
    margin: 0 auto; /* 让整个容器居中 */
}

.plant_beet_form {
    width: 100%;
    margin: 0 auto;
    font-size: 3rem;
}

.plant div {
    width: 70%;
    margin: 0 auto;
}

.plant input{
    margin: 0 auto;
    width: 100%;
    font-size: 2.5rem;
}

.plant img {
    width: 10rem;
    height: 10rem;
    margin-bottom: 1rem;
}

.plant {
    width: 100%; /* 占满Grid列的宽度 */
    margin-bottom: 0; /* 移除底部margin，改用Grid的gap控制间距 */
    text-align: center; /* 让内部内容居中，可选 */
}

备选方案：Flex布局实现 #

如果你更习惯用Flex，也可以这样设置父容器：

.plants-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: 80%;
    margin: 0 auto;
}

.plant {
    flex: 0 0 calc(50% - 1rem); /* 计算宽度，减去gap的一半避免换行 */
    margin-bottom: 0;
    text-align: center;
}

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