본문 바로가기
Frontend/HTML&CSS

[HTML & CSS] CSS Grid minmax로 내부 요소 비율 유지하기 (feat. text 말줄임표 처리)

by 모너아링 2024. 6. 23.

문제 발생 

CSS Grid를 사용한 반응형 페이지에서 내부 요소의 width가 길어지면 grid의 비율이 깨지는 현상이 발생했습니다.

.lectureCardWrapper {
  display: grid;
  gap: var(--margin-size-lg);
  
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
}

@media screen and (max-width: 880px) {
  .lectureCardWrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
}

@media screen and (max-width: 530px) {
  .lectureCardWrapper {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, auto);
  }
}

 

css 코드는 다음과 같습니다.

 

880px 이상일 경우 -> 1 : 1 : 1

530px ~ 880px 이상일 경우 -> 1 : 1

530px 이상일 경우 -> 1

 

인 비율을 유지하도록 작성했습니다.

 

이후 내부 요소의 text가 길어질 경우 말줄임표로 처리하기 위해 ellipsis를 적용하였습니다.

white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;

 

하지만 결과는 예상과 달랐습니다.

 

말줄임표가 적용되긴 했지만 grid를 통해 설정했던 1 : 1 : 1의 비율이 깨지고 말았습니다..

 

하여 grid의 minmax를 사용하여 width 값을 계산하기로 했습니다.

 

width 조건은 다음과 같습니다.

0 ~ 1200px: 90vw,

1200px ~ : 1200px (max-width가 1200px)

 

calc를 사용하여 min: 90vw / max: 1200px 에서 요소 사이의 gap X 2 값을 빼주고 요소 개수를 (스크린 너비에 따라 다름) 나눴습니다.

 

완성된 코드

.lectureCardWrapper {
  display: grid;
  gap: var(--margin-size-lg);
  grid-template-columns: repeat(3, 
    minmax(
      calc(90vw - 5px - var(--margin-size-lg) * 2) / 3), 
      calc((1195px - var(--margin-size-lg) * 2) / 3)
    )
  );
  grid-template-rows: auto auto;
}

@media screen and (max-width: 880px) {
  .lectureCardWrapper {
    grid-template-columns: repeat(2, 
      calc((calc(90vw - 5px) - (var(--margin-size-lg) * 2)) / 2)
    );
    grid-template-rows: auto auto auto auto;
  }
}

@media screen and (max-width: 530px) {
  .lectureCardWrapper {
    grid-template-columns: 
      calc((calc(90vw - 5px) - (var(--margin-size-lg) * 2))
    );
    grid-template-rows: repeat(8, auto);
  }
}

 

또 다른 문제 발생

880px 이상일 때 min값이 max값 보다 커지면서 1200px가 아닌 90vw값으로 width가 잡혀 동일하게 비율이 깨졌습니다.

 

이를 해결하기 위해 min, max을 계산하여 대입하였습니다.

 

완성된 코드

.lectureCardWrapper {
  display: grid;
  gap: var(--margin-size-lg);
  grid-template-columns: repeat(3, 
    minmax(
      min(calc((90vw - 5px - var(--margin-size-lg) * 2) / 3), calc((1195px - var(--margin-size-lg) * 2) / 3)), 
      max(calc((90vw - 5px - var(--margin-size-lg) * 2) / 3), calc((1195px - var(--margin-size-lg) * 2) / 3))
    )
  );
  grid-template-rows: auto auto;
}

@media screen and (max-width: 880px) {
  .lectureCardWrapper {
    grid-template-columns: repeat(2, 
      calc((calc(90vw - 5px) - (var(--margin-size-lg) * 2)) / 2)
    );
    grid-template-rows: auto auto auto auto;
  }
}

@media screen and (max-width: 530px) {
  .lectureCardWrapper {
    grid-template-columns: 
      calc((calc(90vw - 5px) - (var(--margin-size-lg) * 2))
    );
    grid-template-rows: repeat(8, auto);
  }
}

'Frontend > HTML&CSS' 카테고리의 다른 글

[styled-components] Grid로 반응형 구현  (1) 2024.01.05
[html & css] 드래그 방지  (0) 2023.02.19
[HTML/CSS] flex 사용 시 가운데 정렬  (0) 2022.12.07
[HTML/CSS] 네이버 메뉴바  (0) 2022.11.10