Introduce a row-break in CSS grid

Question

I'm working with a grid of tiles, where all tiles should have the same aspect ratio, independent of the content. I also want it to be responsive (wider window = more columns).

I have a working version for that (see in the snippet below under the first h1). Now I'm looking for a way to group the tiles inside the grid so that there's something like a row-break to indicate the grouping. When I use more than one grid div, the aspect ratio of the tiles in the different groups is different (unless there are enough tiles to hit the maximum number of columns).
The second part of the following snippet demonstrates that: I want to have all tiles share the same aspect ratio.

I'm overwhelmed by the options CSS grid offers and struggle to come up with a proper solution for that.

.boxes {
  width: 100%;
  display: grid;
  grid-column-gap: 0.4em;
  grid-row-gap: 0.4em;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(11em, 10fr));
  margin-bottom: 3px;
}

.box {
  padding: 3px;
  border: 1px solid black;
}

 <h1>single</h1>
  <div class="boxes">
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
  </div>

  <h1>multiple</h1>
  <div class="boxes">
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
  </div>
  <div class="boxes">
    <div class="box">lorem</div>
    <div class="box">lorem</div>
  </div>
  <div class="boxes">
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
  </div>
  <div class="boxes">
    <div class="box">lorem</div>
  </div>
  <div class="boxes">
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
    <div class="box">lorem</div>
  </div>