Symfony4纯CSS实现每行两列盒子布局问题求助

步骤1：修改Twig模板，添加外层容器 #

给循环渲染的.client盒子套一个外层容器，方便统一控制整体布局：

<div class="client-container">
{% for contact in contacts %}
<div class="client">
    {% if contact.giftCheck %}
        <p class="bold">{{ contact.giftCheck.beneficiaryUser.firstName }}
        {{ contact.giftCheck.beneficiaryUser.lastName }}</p>
        <p class="bold">{{ contact.giftCheck.orderItem.box }}</p>
        <p class="bold">{{ contact.chosenFormula }}</p>
    {% endif %}
    <a class="edit_btn">Accepter</a>
    <a class="edit_btn">Refuser</a>
</div>
{% endfor %}
</div>

步骤2：用CSS Grid实现两行布局（推荐） #

Grid布局语法简洁，能轻松实现均分列宽的效果：

/* 外层容器：控制整体布局规则 */
.client-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行固定2列，宽度自动均分 */
    gap: 20px; /* 盒子之间的间距，可按需调整 */
    padding: 20px; /* 容器内边距，避免盒子贴边 */
}

/* 单个盒子样式调整 */
.client{
    box-sizing: border-box;
    width: 100%; /* 填满网格列，保证两个盒子宽度一致 */
    border: solid #000000 1px;
    padding: 15px;
    background-color: #ffffff; /* 可选，添加背景色更贴近示例效果 */
}

/* 按钮样式优化，匹配示例视觉 */
.edit_btn {
    display: inline-block;
    margin: 10px 5px 0;
    padding: 8px 16px;
    background-color: #f0f0f0;
    text-decoration: none;
    color: #000000;
    border-radius: 4px;
}

.edit_btn:hover {
    background-color: #e0e0e0;
}

.bold {
    font-weight: bold;
    margin: 8px 0; /* 调整文本间距，提升美观度 */
}

备选方案：Flexbox布局 #

如果更习惯Flex语法，也可以使用以下代码：

.client-container {
    display: flex;
    flex-wrap: wrap; /* 超出容器宽度自动换行 */
    gap: 20px;
    padding: 20px;
}

.client {
    box-sizing: border-box;
    flex: 0 0 calc(50% - 10px); /* 50%宽度减去一半gap，避免换行后溢出 */
    border: solid #000000 1px;
    padding: 15px;
    background-color: #ffffff;
}

/* 按钮和文本样式可复用上述Grid方案的代码 */

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