CSS Subgrid로 부모·자식 레이아웃을 완벽히 맞추는 최신 그리드 기술 정보
CSS CSS Subgrid로 부모·자식 레이아웃을 완벽히 맞추는 최신 그리드 기술본문
CSS Grid로 레이아웃을 만들 때 가장 답답한 점은 ‘자식 요소가 부모 그리드의 column/row 정렬을 그대로 따라가지 못하는 문제’인데, Subgrid를 사용하면 상·하위 요소가 마치 하나의 그리드처럼 정렬되어 디자인 가이드와 100% 일치하는 정확한 레이아웃을 만들 수 있다.
Subgrid는 부모에서 정의한 grid-column, grid-row를 자식이 그대로 상속받기 때문에 카드 내부의 텍스트·이미지를 부모 그리드에 정확히 맞게 정렬할 수 있고, 리스트형 UI나 대시보드형 레이아웃에서 “펴질 때·줄어들 때” 디자인이 틀어지지 않는다.
미디어쿼리 사용량도 줄고, 콘텐츠가 바뀌어도 균형이 유지되어 유지보수성이 크게 향상된다.
.parent {
display:grid;
grid-template-columns:150px 1fr 1fr;
}
.child {
display:grid;
grid-template-columns:subgrid;
grid-column:1 / -1;
}
이렇게 구성하면 내부 요소도 부모와 완전히 같은 열 구조를 따라가기 때문에, 디자이너가 만든 ‘정확한 수직 그리드·정렬 기준’을 실무에서도 그대로 구현할 수 있다.
최근 퍼블리싱 트렌드에서 Subgrid는 반응형 그리드와 함께 가장 강력한 “레이아웃 안정성 향상 기술”로 평가받고 있다.
Subgrid는 부모에서 정의한 grid-column, grid-row를 자식이 그대로 상속받기 때문에 카드 내부의 텍스트·이미지를 부모 그리드에 정확히 맞게 정렬할 수 있고, 리스트형 UI나 대시보드형 레이아웃에서 “펴질 때·줄어들 때” 디자인이 틀어지지 않는다.
미디어쿼리 사용량도 줄고, 콘텐츠가 바뀌어도 균형이 유지되어 유지보수성이 크게 향상된다.
.parent {
display:grid;
grid-template-columns:150px 1fr 1fr;
}
.child {
display:grid;
grid-template-columns:subgrid;
grid-column:1 / -1;
}
이렇게 구성하면 내부 요소도 부모와 완전히 같은 열 구조를 따라가기 때문에, 디자이너가 만든 ‘정확한 수직 그리드·정렬 기준’을 실무에서도 그대로 구현할 수 있다.
최근 퍼블리싱 트렌드에서 Subgrid는 반응형 그리드와 함께 가장 강력한 “레이아웃 안정성 향상 기술”로 평가받고 있다.
추천
2
2
댓글 1개
감사합니다 ^^
