Мат-карты перекрывают 80 процентов времени

Question

У меня около 16 матовых карт, и я хочу по 4 в каждом ряду, и когда я изменяю размер экрана, я не хочу, чтобы карты становились меньше. Я хочу уменьшить количество карточек в каждом ряду при изменении размера, чтобы карточки не перекрывались. Но по какой-то причине мои карты перекрывают 80 процентов времени, но иногда они не перекрываются, а просто переходят в другой ряд, и это именно то, что я хочу. Кто-нибудь знает решение, чтобы карты не перекрывались в 100% случаев?

Answer 1

* {
  box-sizing: border-box;
  margin: 0;
}
html, body {
  padding: 0;
}
.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* if space between cards */
  justify-content: center; /* if no space between cards */
}
.card {
  flex-basis: 300px;
  border: 1px solid black;
  min-height: 150px;
}
.card:nth-child(even) {
  background: lightblue;
}
.card:nth-child(odd) {
  background: lightgreen;
}

<div class="card-wrapper">        
  <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 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> 

Answer 2

Вам нужно написать каждую карточку в mat-grid-list и cols="4". Также вы можете увидеть ссылку на angular материал официального сайта.

angular материал официального сайта

Если вы не хотите использовать это для макета, чем вы можно использовать bootstrap для макета.

bootstrap макет