Subgrid
서브그리드
서브그리드는 부모의 행 또는 열 크기를 공유하는 다른 그리드 안의 그리드입니다. 한 방향 또는 양쪽 방향을 공유할 수 있습니다.
다른 예시
세 개의 요금 카드가 부모 그리드에 놓여 있습니다. 각 카드는 `grid-template-rows: subgrid`를 사용합니다. 플랜 이름, 가격, 기능 및 CTA 버튼은 텍스트 길이가 달라도 정렬됩니다. 좁은 화면에서는 부모가 한 열로 변경되지만 레이아웃은 여전히 이해할 수 있습니다.
주요 부분
- 01상위 트랙
- 02서브그리드 축
- 03정렬된 후속
사용할 때
중첩된 구성 요소 안의 콘텐츠가 트랙 규칙을 복사하지 않고 공유 상위 트랙과 정렬되어야 할 때 사용하세요.
다음 경우에는 사용하지 마세요
격자가 중첩되어 있다고 해서 서브그리드만 사용하지 마세요. 아이템이 카드 간에 정렬될 필요가 없으면 별도의 자식 그리드가 더 간단합니다.
코드에서 사용된 이름
grid-template-columns: subgrid and/or grid-template-rows: subgrid 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 서브그리드 (Subgrid)。 User context：세 개의 요금 카드가 부모 그리드에 놓여 있습니다. 각 카드는 `grid-template-rows: subgrid`를 사용합니다. 플랜 이름, 가격, 기능 및 CTA 버튼은 텍스트 길이가 달라도 정렬됩니다. 좁은 화면에서는 부모가 한 열로 변경되지만 레이아웃은 여전히 이해할 수 있습니다. Design concept to apply：서브그리드 (Subgrid)。 Why it fits：중첩된 구성 요소 안의 콘텐츠가 트랙 규칙을 복사하지 않고 공유 상위 트랙과 정렬되어야 할 때 사용하세요. Do not use it when：격자가 중첩되어 있다고 해서 서브그리드만 사용하지 마세요. 아이템이 카드 간에 정렬될 필요가 없으면 별도의 자식 그리드가 더 간단합니다. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 서브그리드 (Subgrid) is used now. Definition: 서브그리드는 부모의 행 또는 열 크기를 공유하는 다른 그리드 안의 그리드입니다. 한 방향 또는 양쪽 방향을 공유할 수 있습니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.