无法在网格容器中均匀地间隔项目

Question

在下图中，我如何摆脱重叠的 div。 正在为我的设置尝试 flexbox，但无法解决问题，现在我使用的是 CSS 网格系统。 我试图让图标，然后是一个小间隙，然后是在同一行上完全可见的数字，然后又是一个小间隙，最后是最右侧可见的红色数字。 下面是我的 CSS 和 HTML：

<div class="main-container">
        <lightning-card class="slds-p-right_small" variant="narrow" icon-name="utility:tracker">
            <h1 slot="title" style="font-style:normal; font-family:'Candara';"><strong>BRITISH COLUMBIA</strong></h1>
            <hr class="titleDivider">
            <div id="bcDiv" class="city-scroll-section" onscroll={loadMoreonScrollEnd} data-id="BC">
            <template for:each={bc} for:item="city">
                <div class="grid-container" key={city.Id}>
                    <div class="grid-column-cityName">
                        <div style="color: rgb(28, 69, 145);"><strong>{city.Name}</strong></div>
                    </div>
                    <div class="mini-grid-container">
                        <div style="display: grid; grid-template-columns:1fr 3fr">
                            <span><lightning-icon icon-name="utility:company" size="small"></lightning-icon></span>
                            <!-- <span><b>{city.sumchans__Total_Buildings__c}</b></span> -->
                            <span><b>10000000</b></span>
                        </div>
                        <div>
                            <template for:each={city.sumchans__City_Stats__r} for:item="stats">
                                <div key={stats.Id}
                                    style="color: rgb(197, 81, 61);font-size:14px;">
                                    <span><strong>{stats.sumchans__Penetration__c}%</strong></span></div>
                            </template>
                        </div>
                    </div>
                </div>
                <hr class="divider" key={city.Id}>
            </template>
        </div>
        </lightning-card>      
    </div>

CSS：

 .divider { 
    margin-top: 3px; 
    margin-bottom: 2px;
    border-width:0.2px; 
    border: 1px dotted #81b9fa;
    border-style: none none dotted; 
}
.titleDivider {
    margin-top: 1px; 
    margin-bottom: 1px;
    border-width:3px; 
    border-color:rgb(36, 36, 71);
}
.main-container {
    display: grid;
    justify-content: center;
    /* width:500px; */
}
.grid-container {
    display: grid;
    grid-template-columns: 60% 40% ;
    /* grid-template-rows: auto;  */
}
.grid-column-cityName {
    margin: 10px 0px 10px 7px;
    border-radius: 5px;
    /* background-color: rgb(249, 252, 255); */
}
.mini-grid-container {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}
.city-scroll-section {
    height:180px;
    overflow-y: scroll;
    scroll-behavior: smooth;
    /* scrollbar-width: none; */
}
.city-scroll-section::-webkit-scrollbar {
    width: 0px;
}

Answer 1

你可以用display:flex; 和justify-content: space-between; , .boxes内的元素将根据.boxes 的宽度占用边距

 .boxes{ width:300px; display:grid; grid-template-columns:1.4fr 2fr; border:2px solid; padding:5px; } .boxes .right{ display:flex; flex-direction:row; justify-content:space-between; }

 <div class="boxes"> <div class="left"> <p>test</p> </div> <div class="right"> <p>test</p> <p>test</p> <p>test</p> </div> </div>