[CSS] grid item 크기 넘칠 때

 

 

Grid 아이템을 한줄에 두개씩 나오게하기 위해 아래와 같이 CSS 코드를 넣었는데, 어떠한 경우에는 아이템 크기가 넘쳐서 화면을 벗어나는 경우가 생겼다.

.ec-base-product ul.grid2 {grid-template-columns: repeat(2, 1fr);}

 

 

무슨 이유인지는 잘 모르겠으나, 구글링한 결과 아래처럼 바꿔줬더니 해결 가능했다.

.ec-base-product ul.grid2 {grid-template-columns: repeat(2, minmax(0, 1fr));}

 

 

 

 

 

참고 : https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items