CSS GRID LEVEL 2

Subgrid Alignment Lab

カードの中身が違っても、線は揃う。

CHECKING
01

LIVE COMPARISON

同じ内容、違う行の作り方

SAME HTML

pricing.local / plans

1080pxINDEPENDENT ROWS

STARTER

Launch

¥0/ month

個人のプロトタイプを、すばやく公開。

  • 1 project
  • Community support
No credit card
MOST POPULAR

FOR TEAMS

Studio

¥4,800/ month

デザインと実装を、チームの共通言語に。

  • Unlimited projects
  • Shared design tokens
  • Visual review
Cancel anytime

ADVANCED

Scale

Customannual contract

複数ブランドを、安全に運用するために。

  • Everything in Studio
  • Advanced permissions
  • Audit log & SSO
  • Priority support
Response in 1 day
CARDS3
SHARED ROWS0
CONTENTREAL
VIEWPORT1080
02

WHY SUBGRID?

カードを越えて、行を共有する

PARENT GRID4 shared rows
01

内容量を保つ固定高や文字の切り捨てに頼りません。

02

基準線を揃える見出しからCTAまで同じ行に参加します。

03

HTMLはそのまま意味のあるカード構造を崩しません。

CSS RECIPE

親の行を、子カードへ渡す

PARENT

親Gridが、すべてのカードで共有する行を計算。

CHILD

span 4したカードが、その4行をsubgridとして利用。