에어비앤비 클론 코딩 - 7주차

6주차 피드백

Problem

이미지 비율 유지하면서 반응형으로 만들기

 

현재 4개 이미지가 일정비율을 유지하면서 반응형이 되게 하는것까지 성공했다.

하지만 이상하게 아레 메뉴 목록(장소, 별점등)등을 추가하면 이미지 높이가 길어진다.

 

 

원래 에어비앤비

 

내가 구현한 에어비앤비

 

First - Solve

grid에 top bottom 비율을 조율했다.

.main_ctt_crd1 {
  display: grid;
  column-gap: 24px;
  grid-auto-rows: minmax(0, 1fr);
  grid-template-areas:
    'top'
    'bottom';
  width: 100%;
  height: 100%;
  grid-template-rows: 58% 30%;
}

 

하지만 아래와 거리가 너무 멀다.

 

row-gap을 0으로 해봤지만 간격을 더 줄여야 한다.

 

이 문제는 아직 해결하지 못해서 좀 더 찾아봐야 겠다.

 

 

 

---