[Vuejs]-Cannot locate why the cards are not staying within the grid format

by

0👍

Based off @yoduh ‘s comment, I figured out the issue. Because of the fixed width of 300px on the Card.vue:

.face {
  width: 300px;
  height: 200px;
  transition: 0.7s;
}

combined with the minimum of 200px minmax on the Card-List.vue:

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-left: 30px;
  padding-right: 30px;
  width: 100%;
  background: linear-gradient(#141e30, #243b55);
  column-gap: 100px;
  min-height: 95vh;
}

It was causing issues, I therefore changed the minimum on the minmax to 300px and that fixed the issue.

Leave a comment