현재 많은 사이트들에서 사용하는 grid 스타일 속성은 다음과 같습니다.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
위 처럼 작성하는 대신에 다음과 같이 되어야 한다는 것입니다.
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(10px, 1fr));
}
왜일까요? 전자의 경우 그리드 열의 최소 너비는 최소 내용이므로 원하는 것보다 어색하게 더 넓어질 수 있습니다.
후자의 경우 최소값을 10px로 줄였습니다 (0이 아니므로 사라지지 않고 더 많은 혼란을 초래하지 않음).
작업이 조금 필요하지만 더 나은 효율을 볼 수 있을거에요!
'CSS' 카테고리의 다른 글
아무도 말하지 않는 6가지 CSS 속성 (0) | 2021.01.30 |
---|---|
[CSS] 가상 스크롤바에 대하여.. (0) | 2021.01.23 |
css variables? css 변수 사용하기 (0) | 2021.01.11 |
CSS로 가운데 맞추기 (0) | 2021.01.03 |
키프레임 에니메이션을 지연시키는 새로운 방법 (0) | 2020.10.18 |
댓글