如何消除两列方形容器间距并统一所有方块间距？

我有两列方块，需要让所有方块之间的间距保持一致。尝试用Grid布局来实现，但所有方块都变成了单列排列。

我的代码 #

HTML代码 #

<div class="row">
    <div class="col-md-6">
        <img src="./img/02.jpg" class="img-fluid" alt="Image">
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
                <div class="square-container bg-primary"></div>
            </div>
            <div class="col-md-6">
                <div class="square-container bg-secondary"></div>
            </div>
            <div class="col-md-6">
                <div class="square-container bg-success"></div>
            </div>
            <div class="col-md-6">
                <div class="square-container bg-danger"></div>
            </div>
        </div>
    </div>
</div>

CSS代码 #

body {
    font-family: 'Exo 2', sans-serif;
    width: 100%;
    height: 100%;
    background-size: cover;
}

p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.square-container {
    width: 220px;
    height: 235px;
}

.grid-gap {
    display: grid;
    grid-gap: 1em;
}

解决方案 #

方案一：基于Bootstrap调整间距 #

你之前混用Bootstrap栅格和Grid布局导致冲突了，直接用Bootstrap自带的间距类就能搞定：

1. 给右侧内部的row加g-4类（g是gap的缩写，数值1-5对应不同大小的间距），一键设置列、行之间的统一间距
2. 给square-container加w-100 h-100让它填满父容器，避免固定宽高导致的溢出或间距错位

修改后的HTML：

<div class="row">
    <div class="col-md-6">
        <img src="./img/02.jpg" class="img-fluid" alt="Image">
    </div>
    <div class="col-md-6">
        <div class="row g-4">
            <div class="col-md-6">
                <div class="square-container bg-primary w-100 h-100"></div>
            </div>
            <div class="col-md-6">
                <div class="square-container bg-secondary w-100 h-100"></div>
            </div>
            <div class="col-md-6">
                <div class="square-container bg-success w-100 h-100"></div>
            </div>
            <div class="col-md-6">
                <div class="square-container bg-danger w-100 h-100"></div>
            </div>
        </div>
    </div>
</div>

要是必须保留方块的固定宽高，给square-container加mx-auto居中就行：

.square-container {
    width: 220px;
    height: 235px;
    margin: 0 auto;
}

方案二：改用纯Grid布局 #

不想用Bootstrap栅格的话，直接用Grid重构右侧布局，彻底避免冲突：

1. 把右侧原来的row换成自定义类square-grid
2. 设置Grid为2列等宽，统一间距

修改后的HTML：

<div class="row">
    <div class="col-md-6">
        <img src="./img/02.jpg" class="img-fluid" alt="Image">
    </div>
    <div class="col-md-6">
        <div class="square-grid">
            <div class="square-container bg-primary"></div>
            <div class="square-container bg-secondary"></div>
            <div class="square-container bg-success"></div>
            <div class="square-container bg-danger"></div>
        </div>
    </div>
</div>

对应的CSS：

.square-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.square-container {
    width: 100%;
    height: 235px;
}

这样四个方块的水平、垂直间距就完全一致了，不会再出现单列的问题。

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