Admin Page 질문있습니다.

애플 선생님 과제 열심히 하다가 문제가 생겨서 질문합니다
일단 전 Bootstrap을 전혀 쓰지 않고 했는데..





미디어 쿼리를 사용해 모바일 사이즈까지 만들어봤습니다. 
그런데 pc사이즈에서 모바일 사이즈로 천천히 줄이다 보니



조금 줄이니까 grid item들이 금방 흘러 넘치고 너비도 일정하지 않더라고요
저 부분은 grid를 사용하여 만들었고
부모의 스타일은
 .main-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
}
이렇게 준 상태입니다.

1fr말고 %로 전부 바꿔서 적용했는데 너비는 일정하게 줄어들지만 넘칩니다.
단위를 vw로 바꿨더니 글씨들이 삐져나옵니다.(글씨 삐져나오는건 해결했습니다.) 그래도 넘칩니다 ㅜㅜ
그리고 grid-auto-flow:row; 속성을 추가해봤으나 무반응이고.. 
overflow:hidden, scroll, auto등도 줘 봤지만 지저분해지고 마음에 안 듭니다.. 


 Q1 . 저 grid item의 너비가 화면 사이즈를 줄여도 넘치지 않고 적절히 일정한 사이즈로 줄어들게 만들 수 있는 방법이 있을까요..?
검색해봐도 잘 모르겠습니다. 

일단은 미디어 쿼리를 추가해서  2행 2열로 만들어 해결한 상태입니다..
@media screen and (max-width: 992px) {
  .main-dashboard-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

• 이 게시글은 kkh에 의해 1 년, 1 월 전에 수정됐습니다.
• 이 게시글은 kkh에 의해 1 년, 1 월 전에 수정됐습니다.
• 이 게시글은 kkh에 의해 1 년, 1 월 전에 수정됐습니다.