Looking under the hood of Bootstrap gutters led me to realize that the space between columns is added using padding, not a margin.
This is problematic because if you want to use Bootstrap 5's default flexbox to get your columns of equal height, you have to apply things like box shading or background to the column itself. This means that a gutter using padding gives you an awkward white gap within your column, rather than space between the columns.
Here's a fiddle that demonstrates my issue:
.red {
background-color: red;
color: white;
}
.blue {
background-color: blue;
color: white;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<h2>
No Gutters
</h2>
<div class="container px-5">
<div class="row ">
<div class="col-6 red">
<p>Column content</p>
<p>is different</p>
<p>heights.</p>
</div>
<div class="col-6 blue">
<p>See? Shorter.</p>
</div>
</div>
</div>
<h2>
Gutters via Padding
</h2>
<div class="container px-5">
<div class="row gx-4">
<div class="col-6 red">
<p>Column content</p>
<p>is different</p>
<p>heights.</p>
</div>
<div class="col-6 blue">
<p>See? Shorter.</p>
</div>
</div>
</div>
<h2>
Gutters fine but BG Wonky
</h2>
<div class="container px-5">
<div class="row gx-4">
<div class="col-6">
<div class="red">
<p>Column content</p>
<p>is different</p>
<p>heights.</p>
</div>
</div>
<div class="col-6">
<div class="blue">
<p>See? Shorter.</p>
</div>
</div>
</div>
</div>Is there any way to get space between columns that acts as a margin not padding? If you add a straight-up margin it pushes the whole grid layout out of whack.