Flex / grid layout. Need advice how to lay out blocks properly using Flex of Grid CSS model

Question

Hi, community!
I need advice on, is it possible to achieve the following card structure (without additional wrappers)?

Desired behavior: the first row should have the 3 cards, the second - 2 cards, the 3-rd - 3 cards and go on... I've attached a simple example for the first 2 rows for a better understanding of the problem.

* {
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.list .item {
  display: flex;
  justify-content: center;
  width: 33%;
  padding: 20px;
}
.list .item .card {
  width: 80%;
  height: 200px;
  background-color: #000;
}

<div class="list">
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
</div>

Answer 1

If you can set static width for cards, you can try something like that:

* {
  box-sizing: border-box;
}

.list {
  display: grid;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
}

.list .item {
  display: flex;
  justify-content: center;
  padding: 20px;
  grid-column: span 2;
}

.list .item:nth-child(5n - 1) {
  justify-content: flex-end;
}

.list .item:nth-child(5n) {
  justify-content: flex-start;
}

.list .item:nth-child(5n - 1),
.list .item:nth-child(5n) {
  grid-column: span 3;
}


.list .item .card {
  width: 200px; /* static width */
  height: 200px;
  background-color: #000;
}

<div class="list">
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
  <div class="item"><div class="card"></div></div>
</div>