CSS 그리드에서 grid-template-columns
및 grid-template-rows
속성을 사용하면 선 이름을 정의하고 그리드 열 및 행의 크기를 각각 추적할 수 있습니다. 이러한 속성에 대한 보간을 지원하면 그리드 레이아웃이 애니메이션 또는 전환의 중간 지점에서 갑자기 바뀌는 대신 상태 간에 원활하게 전환할 수 있습니다.
브라우저 지원
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
애니메이션 처리
그리드 레이아웃은 애니메이션이나 전환의 중간 지점에서 맞추는 대신 상태 간에 원활하게 전환할 수도 있습니다.
다음 데모에서는 그리드에 여러 아바타가 표시됩니다. 공간을 절약하기 위해 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
값을 변경하는 애니메이션에도 적용됩니다.