기본셋팅

컨테이너
-카드 박스
---카드

내가 원하는 레이아웃이다.

결론

.card-box{
  display: flex;
  flex-direction: colum;
  width: calc((100% / 3) - 2rem);
}

.card{
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

카드 박스에 width값을 calc함수를 사용하여 100% / 3으로 나눠주고, 여백을 위해 -2rem을 해줬다.

그리고 각각의 카드에는 width 100%, height 0, padding-bottom 100%를 주면 화면의 크기에 따라 1대 1비율로 변화된다.