html - CSS 网格边距不正确

Question

我目前有两个 CSS 网格。其中一个间隔均匀，另一个不均匀，它们完全相同。

这是正确间隔的网格:

这是错误间隔的网格:

这是代码笔:https://codepen.io/Hedgy134117/pen/GRRWjxw (我为奇怪的间距道歉，我正在使用 django 来设置 html。)

HTML

<div class="stat">
<div class="stat-section popout">
            <h1>Equipment</h1>
                <div class="item">
                    <p class="item-name">1 A Jar of Tentacles with Eyeballs on the end</p>
                            <p><a class="item-edit" href="/sheets/editItem/A%20Jar%20of%20Tentacles%20with%20Eyeballs%20on%20the%20end/xyvz/">Edit</a></p>
                            <p><a class="item-remove" href="/sheets/removeItem/A%20Jar%20of%20Tentacles%20with%20Eyeballs%20on%20the%20end/xyvz/">Remove</a></p>


                </div>
                    <p style="text-align: center;"><a href="/sheets/addItem/xyvz/">Add</a></p>
        </div>
<div class="stat-section popout">
            <h1>Spells</h1>
                <div class="spell">
                    <p class="spell-name"><a href="https://5thsrd.org/spellcasting/spells/acid_splash/">Acid Splash</a></p>
                    <p class="spell-level">Cantrip</p>
                            <p class="spell-remove"><a href="#"><s>Remove</s></a></p>
                </div>
                    <p style="text-align: center;"><a href="/sheets/addSpell/xyvz/">Add</a></p>
        </div>
</div>

CSS

.stat-main {
    text-align: center;
    padding: 5px;
    width: 100%;
}

.stat-section {
      padding: 10px;
      margin: 10px;
}

.stat {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
}

.spell {
    display: grid;
    grid-template-columns: 50% 25% 25%;
}


.item {
    display: grid;
    grid-template-columns: 50% 25% 25%;
}

.popout {
    border-radius: var(--rounded);
    background-color: #FFFFFF;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.4);
}

我对 CSS 网格、边距和填充还是很陌生，非常感谢所有帮助。

Answer 1

我认为您的 CSS 网格语法非常有效。只是 display: flex parent 使第二个 .stat-section 看起来很糟糕。

我建议您将 min-width 定义到 .stat-section。这样第二个 .stat-section 可以保留它的空间。

检查这个 CodePen :)