Currently, I am working with two CSS grids. One of them has even spacing, while the other does not, although they are identical.
Below is the grid with correct spacing:
https://i.sstatic.net/iwNwf.png
And here is the grid with incorrect spacing:
https://i.sstatic.net/AEvgY.png
You can view the codepen at: https://codepen.io/Hedgy134117/pen/GRRWjxw (Apologies for the strange spacing - I'm using django to set up the 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);
}
I'm still learning about CSS grid, margin, and padding so any assistance would be greatly appreciated.