Сейчас выводятся 3 карточки в ряд по 3 ряда. Мне нужно, чтобы после 6й карточки был переход на следующий ряд, как это сделано на soundcloud: 2 ряда по 6 песен.

<!-- audio player -->
<div class="audio-player">
  <div class="audio-tracklist">
    <% tracks.forEach((track, index) => { %>
    <div class="audio-track">
      <audio id="audio-<%= index %>" src="/tracks/<%= track.filename %>"></audio>
      <div class="audio-track-info" onclick="togglePlay(<%= index %>)">
        <div class="audio-track-image">
          <img src="/img/<%= track.image_filename || 'default-track-image.png' %>" alt="<%= track.title %>">
        </div>
        <h4><%= track.title %></h4>
      </div>
    </div>
    <% }); %>
  </div>
  <div class="audio-player-controls" style="display: none;">
    <button class="audio-player-button" onclick="togglePlay()">
      <i class="audio-player-icon fa fa-play"></i>
    </button>
    <div class="audio-player-progress-fullwidth">
      <input type="range" class="progress-bar" value="0" onchange="setProgressFullwidth(this.value)">
      <span class="progress-time" id="progress-time-fullwidth">0:00</span>
    </div>
  </div>
</div>
<!-- end -->

css:
/* audio player */
/* audio player */
.audio-player {
  margin: 50px auto;
  max-width: 800px;
}


/* .audio-tracklist {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
  gap: 20px;
  list-style: none;
}
 */
 
.audio-tracklist {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
  margin: 0;
  padding: 0;
  gap: 20px;
  list-style: none;
  max-width: 2500px; 
}

/* .audio-track {
  width: 300px;
  text-align: center;
} */

 
/* .audio-tracklist {
  display: flex;
  flex-direction: row;  Изменено на row
  justify-content: center;
  gap: 20px; 
} */


 


.audio-track-info h4 {
  margin: 0;
  font-size: 1.2rem;
}

/* .audio-player-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
}
 */
 
.audio-player-controls {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1;
}

.audio-player-button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  font-size: 2rem;
  color: #666;
  margin-right: 10px;
}

.audio-player-progress-fullwidth {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.audio-player-progress-fullwidth input[type="range"] {
  flex-grow: 1;
  margin: 0 10px;
  -webkit-appearance: none;
  background-color: #eee;
  height: 4px;
  border-radius: 2px;
}

.audio-player-progress-fullwidth input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: #666;
  margin-top: -6px;
  cursor: pointer;
}

.audio-player-progress-fullwidth .progress-time {
  font-size: 0.8rem;
  color: #666;
}

.audio-track-image {
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
}

.audio-track-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

вот как это выглядит у меня: https://yadi.sk/d/mqrLeGxNzp9GEg
А вот как это нужно: https://yadi.sk/d/xMwKhSui3uuqMg