[CSS] Grid 1fr 사용 대신 minmax(10px, 1fr)

현재 많은 사이트들에서 사용하는 grid 스타일 속성은 다음과 같습니다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

 

위 처럼 작성하는 대신에 다음과 같이 되어야 한다는 것입니다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

왜일까요? 전자의 경우 그리드 열의 최소 너비는 최소 내용이므로 원하는 것보다 어색하게 더 넓어질 수 있습니다.

후자의 경우 최소값을 10px로 줄였습니다 (0이 아니므로 사라지지 않고 더 많은 혼란을 초래하지 않음). 

 

작업이 조금 필요하지만 더 나은 효율을 볼 수 있을거에요!

 

 

출처 : css-tricks.com/you-want-minmax10px-1fr-not-1fr/?fbclid=IwAR3AO5HvAqJnPiikbuQ8sfsdkdd8qjZL4VTCISDRBFhdgGvijR9eY4gHBTc