If I have a bootstrap grid...

<div >
<div row gy-5>stuff</div>
<div grid" to  then there is space. But that doesn't make sense to me, why would I want a row of 3 rows? There's something I don't understand about how this works.

Fiddle here: https://jsfiddle.net/xpusostomos/03wqa5x6/2/
    
CodePudding user response：

You have to mention col inside row. Please have a look at the below solution.
Reference: https://getbootstrap.com/docs/5.0/layout/gutters/#vertical-gutters
<div >
    <div >
        <div >
            <div >blah</div>
        </div>
        <div >
            <div >stuff</div>
        </div>
        <div >
            <div >rubbish</div>
        </div>
    </div>
</div>

    
CodePudding user response：

Inspecting your JSFiddle, it looks like margin-top of the rows is the problem because it delivers a negative value:
margin-top: calc(-1 * var(--bs-gutter-y));

So you have to get rid of this wrongly calculated margin-top and all should work fine. You could e.g. add the m-auto class to your rows or fix the margin-top in your own CSS file.
 <div >
    <div >
        <div >
            Select:
        </div>
        <div >
            <label  for="mapped">
                <input id="mapped"  type="checkbox" [(ngModel)]="mapped"
                       (change)="change(true)"/>
                Mapped</label>
        </div>
        <div >
            <label  for="unmapped">
                <input id="unmapped"  type="checkbox" [(ngModel)]="unmapped"
                       (change)="change(true)"/>
                Unmapped</label>
        </div>
    </div>
    <div >
        <div >
            Show:
        </div>
        <div >
            <label  for="summary">
                <input id="summary"  type="radio" [(ngModel)]="detail" [value]="false"
                       (change)="change(false)"/>
                Summary</label>
        </div>
        <div >
            <label  for="detail">
                <input id="detail"  type="radio" [(ngModel)]="detail" [value]="true"
                       (change)="change(false)"/>
                Detail</label>
        </div>
    </div>
    <div >
        <div >
            Group:
        </div>
        <div >
            <label  for="detail">
                <input id="mapGrouped"  type="checkbox" [(ngModel)]="mapGrouped"
                       [value]="true" (change)="change()"/>
                Mapped Status</label>
        </div>
    </div>
</div>

Not sure where this problem comes from. Is it maybe only in Fiddle? I never had problems with the BS grids. Alternatively you could define the grid-gap to get around the problem.