body {
margin: 0;
background: #333;
}
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.cards {
width: 100%;
border: 1px solid red;
/* display: flex;
flex-wrap: wrap; */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
grid-column-gap: 36px;
grid-row-gap: 27px;
}
.card {
width: 370px;
padding: 100px;
box-sizing: border-box;
background: lime;
}
<div class="container">
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<!-- <div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div> -->
</div>
</div>
Если блоков .card
много, то выглядит как надо, но если становится 2, то они растягиваются и появляются отступы. Можно ли добиться такого результата: