Viewport 기준에서 자립형 구성요소로의 패러다임 이동

기존의 반응형 웹 디자인은 전체 화면 너비(Viewport)에 따라 달라졌습니다. 그러나 컴포넌트 지향 전성의 현대, UI 파트는 배치되는 부모 요소(사이드바인가 메인 컬럼인가)에 의해 이용 가능한 가로폭이 다릅니다.

CSS 그리드의 “서브 그리드 (Subgrid)“와 “컨테이너 쿼리 (Container Queries)“의 출현으로 레이아웃의 유연성과 유지 보수성이 크게 향상되었습니다.

레시피 1 : 카드의 높이를 정렬하면서 버튼 위치를 동기화하는 subgrid

복수열의 카드 UI로 타이틀 문자수가 불일치한 경우에서도, 각 카드내의 「이미지・타이틀・본문・버튼」의 높이를 가로 일렬로 완전하게 정렬할 수 있습니다.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4; /* 画像・タイトル・本文・フッターの4行を親グリッドに同期 */
}

카드별로 높이를 계산하는 JavaScript는 전혀 필요하지 않습니다.

레시피 2 : 자신의 너비에 따라 레이아웃이 적응하는@container

카드 컴포넌트 자신이 자신이 놓인 컨테이너 폭에 따라 가로 줄기와 세로 줄을 자동 전환합니다.

.card-wrapper {
  container-type: inline-size;
  container-name: card-container;
}

@container card-container (min-width: 450px) {
  .card-content {
    flex-direction: row; /* 横幅に余裕があれば横並びへ自動変形 */
  }
}

톱 페이지의 폭넓은 에리어와 사이드 바의 좁은 에리어의 양쪽 모두에, 동일 컴퍼넌트를 그대로 사용할 수 있습니다.

실무 도입의 사고 방식

주요 현대 브라우저에서 하위 그리드 및 컨테이너 쿼리는 이미 완전한 대응에 도달했습니다. 화면 전체의 breakpoints에 의한 파탄을 벗어나 각 컴포넌트가 자립하는 CSS 설계로 이행합시다.