Make Row Stretch Across All Columns in CSS Grid

CSS Grid Column Stretch to Fill Entire Row / Or Centered In Row?

This is a job for flexbox, I don't think it will be easy to achieve with CSS grid:

.grid-container {  display: flex;  flex-wrap:wrap;  border:1px solid;  margin:2px;}
.grid-container>div { height: 50px; background: red; margin: .5rem; flex: 1 1 calc(33% - 1rem);}
<div class="grid-container">  <div></div>  <div></div>  <div></div></div><div class="grid-container">  <div></div>  <div></div>  <div></div>  <div></div></div><div class="grid-container">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div></div>

CSS Grid - Stretch & wrap row based on adjacent siblings with a flat DOM

.container {
background: white;
border: dashed red 1px;
padding: 24px;
max-width: 1080px;
display: flex;
flex-wrap: wrap;
gap: 2rem 2rem;
}

.item {
background: lightgray;
min-width: 200px;
min-height: 100px;
display: grid;
place-content: center;
text-align: center;
font-size: 24px;
font-family: 'Helvetica';
flex: 1 0 calc(33% - 2rem);
}

.item-type-a {
flex-basis: 100%;
}
<div class="container">
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-a">Type A</div>
</div>

Wrapping css grid and streching one grid item to take up all empty columns

It can be achieved with display: flex. In addition, it is necessary to use flex-grow property.

As mdn says about flex-grow:

The flex-grow CSS property sets the flex grow factor of a flex item's
main size

* {
box-sizing: border-box;
}

.flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-element {
width: 10%;
border: 1px solid #000;
flex-grow: 1;
min-height: 120px;
box-sizing: border-box;
margin: 0 5px 10px;
justify-content: space-between;
text-align: center;
}
<div class="flex-container">
<div class="flex-element">
1
</div>
<div class="flex-element">
2
</div>
<div class="flex-element">
3
</div>
<div class="flex-element">
4
</div>
<div class="flex-element">
5
</div>
<div class="flex-element">
6
</div>
<div class="flex-element">
7
</div>
</div>

make a single row in CSS grid span all columns

Maybe it is better to use:

fieldset legend {
grid-column: 1/-1;
}

Or if you only need 3 columns

fieldset legend {
grid-column: 1/ span 3;
}

How to stretch last grid item across full width of screen, when it goes to new row?

Not sure if grid is your best option in this scenario.
You might want to use a flex container, setting flex-grow: 1 and min-width on the items.

Example: