CSS 그리드에서 grid-template-columns 속성과 grid-template-rows 속성을 사용하면 각각 그리드 열과 행의 선 이름을 정의하고 크기를 추적할 수 있습니다. 이러한 속성의 보간을 지원하면 애니메이션 또는 전환의 중간 지점에서 그리드 레이아웃을 맞추지 않고 상태 간에 부드럽게 전환할 수 있습니다.
브라우저 지원
- 107
- 107
- 66
- 16
CSS의 값 보간 유형
CSS에서 transition 속성을 사용하여 한 값에서 다른 값으로 속성을 원활하게 전환할 수 있습니다.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
렌더링 엔진이 타겟팅된 속성의 값 유형을 자동으로 감지하고 이 정보를 사용하여 새 값으로 원활하게 전환합니다.
예를 들면 다음과 같습니다.
opacity을(를)0에서1(으)로 전환하시겠습니까? 이를 숫자 보간 유형이라고 합니다.background-color을(를)white에서black(으)로 전환하시겠습니까? 원본 색상과 대상 색상 사이를 페이드합니다.width을(를) 전환하시겠습니까? 필요에 따라 그 과정에서 단위를 변환하여 숫자로 보간합니다.
브라우저가 키프레임 간에 값 보간을 수행하는 CSS 애니메이션에도 동일하게 적용됩니다.
grid-template-columns 및 grid-template-rows 보간
Microsoft 기여자 덕분에 Chrome 버전 107부터 grid-template-columns 및 grid-template-rows 값을 보간할 수 있게 되었습니다.
그리드 레이아웃은 애니메이션 또는 전환의 중간 지점에서 맞추기 대신 상태 간에 부드럽게 전환할 수 있습니다.
아래 데모에서는 그리드가 여러 아바타를 보여줍니다. 공간을 절약하기 위해 grid-template-columns를 사용하여 각 열의 너비를 제한함으로써 아바타가 서로 위에 배치됩니다. 각 열에 마우스를 가져가면 각 열에 추가 공간이 제공됩니다.
.avatars {
display: grid;
gap: 0.35em;
grid-auto-flow: column;
grid-template-columns: repeat(4, 2em);
transition: all ease-in-out 0.25s;
}
.avatars:hover {
grid-template-columns: repeat(4, 4em);
}
transition 속성을 사용하면 그리드가 값 사이에 부드럽게 보간됩니다.
이 효과는 grid-template-columns 또는 grid-template-rows 값을 변경하는 애니메이션에도 적용됩니다.