弹性/网格布局。 需要建议如何使用 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>

Answer 2

You can add a tiny margin to two elements and you can have the same width and also the same distance between elements:

 * { 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; }.list.item:nth-child(5n + 4) { margin-left:1% }.list.item:nth-child(5n + 5) { margin-right:1% }

 <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>

Answer 3

You could make the 2 items you want in one row slightly bigger so it pushes the 3rd item into the next row. the div's are not exacly the same size(.6 % bigger than the 3 items in the row above/below) but it's hard to notice

 .list.item:nth-child(5n - 1){ width: 33.6%; }.list.item:nth-child(5n) { width: 33.6%; } * { 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 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>