[Vuejs]-CSS DIV alignment issues using VUE Components

by

1👍

✅

When you are using width in percents like this you have to compute the right value yourself. The important parts of css are these:

.card {
  width: 15.66%;
  margin: 0.5%;
}

.card2 {
  width: 49%;
  margin: 0.5%;
}

This way the bottom card will take 50% including its margin and the top ones will take same width with same margin of 0.5%. Btw when margin is set in percent it is computed from width of the parent width in both directions.

15.66% is computed from: (50% - 0.5% * 6) / 3 where 6 is number of left and right margins and 3 is number of cards in the top row.

👤Jan Husák

Leave a comment