两列之间的空间分布不均

【问题标题】：Unequal distribution of space between two column两列之间的空间分布不均
【发布时间】：2022-06-10 20:11:35
【问题描述】：

这是由四个方形网格组成的网格的代码。但是，两列之间的差异是不相等的。如何保证等间距？

.industriesFeatureInner {
    h2 {
        margin-top: 6rem;
        font-size: 2rem;
        overflow-wrap: break-word;
    }

    .industriesFeatureList {
        flex-direction: row;
        gap: 2rem;
        overflow-wrap: break-word;

        .industriesFeatureListRow {
            flex-direction: column;
            gap: 2rem;
        }
    }
}

这是上述样式的输出 image for ref

【问题讨论】：

你可以分享一个代码笔或沙箱的工作代码

标签： html css sass

【解决方案1】：

设置width 的grid 项目喜欢

Width:calc((100% / 2 )- 2rem);

Width 100% / 2 = 50% - 2rem = real width

Edit

.view{
   display: flex;
   flex-wrap: wrap;
   gap: 0.8rem; 
   justify-content: center;
   border: 1px solid #000;
}
.item{
   height:4rem;
   border: 1px solid #000;
   background:#000000;
   width: calc((100% / 2) - 0.8rem);
}

<div class="view">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

【讨论】：