[{"data":1,"prerenderedAt":33},["ShallowReactive",2],{"post-introduction-to-subgrid":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":12,"thumbnail":25,"ogpImage":29},"introduction-to-subgrid","2026-04-17T03:09:40.787Z","2026-05-26T06:55:36.306Z","2026-05-26T06:36:28.585Z","グリッドレイアウトをさらに使いこなすCSSサブグリッド入門","\u003Cp>以前の記事（\u003Ca href=\"https:\u002F\u002Fwww.ceroan.co.jp\u002Fcho-men\u002Fpost\u002Fnew-layout-method-introduction-to-css-grid-layout\" target=\"_blank\" rel=\"noopener noreferrer\">レイアウト手法の新しい武器になるCSSグリッドレイアウト入門\u003C\u002Fa>）では、CSSグリッドレイアウトの基本的な使い方を紹介しました。グリッドレイアウトには、今回紹介するサブグリッドという機能もあります。サブグリッドを使うことで、親グリッドのトラック構造を子要素に継承させることができ、複雑なレイアウトをシンプルに実現できます。\u003C\u002Fp>\u003Cp>この記事では、サブグリッドの基本的な仕組みと使い方を紹介します。グリッドレイアウトの基本については、前編の記事をあわせてご覧ください。\u003C\u002Fp>\u003Ch2 id=\"hb124aaf2a5\">サブグリッドとは\u003C\u002Fh2>\u003Cp>サブグリッドとは、グリッドアイテムが親グリッドのトラック構造を引き継いで、自身もグリッドコンテナとして機能する仕組みです。\u003Ccode>grid-template-rows\u003C\u002Fcode>または\u003Ccode>grid-template-columns\u003C\u002Fcode>の値に\u003Ccode>subgrid\u003C\u002Fcode>を指定することで利用できます。\u003C\u002Fp>\u003Ch3 id=\"h3d5f13eed1\">親グリッドのトラックを子要素に継承する仕組み\u003C\u002Fh3>\u003Cp>通常、グリッドアイテムに対して\u003Ccode>display: grid\u003C\u002Fcode>を指定して入れ子のグリッドを作成した場合、子グリッドは親グリッドとは独立したトラック構造を持ちます。そのため、親グリッドのトラックのサイズと子グリッドのトラックのサイズは連動しません。\u003C\u002Fp>\u003Cp>サブグリッドを使用すると、子グリッドが親グリッドのトラックをそのまま引き継ぎます。親グリッドのライン番号やエリア名もそのまま利用でき、親子のグリッドが一体となって動作します。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F341eaf4d5bd34066a794ce4075ae9183\u002FFrame%2041.png\" alt=\"\" width=\"1293\" height=\"474\">\u003C\u002Ffigure>\u003Ch3 id=\"hfc0b096f23\">ブラウザーの実装状況\u003C\u002Fh3>\u003Cp>サブグリッドの各ブラウザーの実装状況を確認すると、Chrome 117、Edge 117、Safari 16、Firefox 71以降でいずれも利用可能となっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F6736c55cfd2d4074abf8d7ec9338ed6e\u002F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-05-25%20141410.png\" alt=\"\" width=\"2064\" height=\"1018\">\u003C\u002Ffigure>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fcaniuse.com\u002Fcss-subgrid\" target=\"_blank\" rel=\"noopener noreferrer\">Can I use ... | CSS Subgrid\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"hbb14d8e43a\">サブグリッドの基本的な使い方\u003C\u002Fh2>\u003Cp>サブグリッドを使用するには、グリッドアイテムに\u003Ccode>display: grid\u003C\u002Fcode>を指定した上で、\u003Ccode>grid-template-rows\u003C\u002Fcode>または\u003Ccode>grid-template-columns\u003C\u002Fcode>の値に\u003Ccode>subgrid\u003C\u002Fcode>を指定します。\u003C\u002Fp>\u003Ch3 id=\"h3aa9ef6164\">grid-template-rowsにsubgridを指定する\u003C\u002Fh3>\u003Cp>まず、親グリッドコンテナ側で行のトラックを定義します。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, auto);\n  gap: 16px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>次に、グリッドアイテム（カード）側でサブグリッドを指定します。\u003Ccode>grid-row\u003C\u002Fcode>で親グリッドの何行分を占有するかを指定し、\u003Ccode>grid-template-rows: subgrid\u003C\u002Fcode>で親グリッドの行トラックを継承します。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.card {\n  display: grid;\n  grid-row: span 4; \u002F* 親グリッドの4行分を占有 *\u002F\n  grid-template-rows: subgrid; \u002F* 親グリッドの行トラックを継承 *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>これにより、各カード内の子要素が親グリッドの行トラックに沿って配置されるようになります。テキスト量が異なるカードが並んでいても、対応する要素の縦位置が揃います。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F96fd1bdb35684e528a9839917369eeff\u002FFrame%2035.png\" alt=\"\" width=\"1191\" height=\"718\">\u003C\u002Ffigure>\u003Ch3 id=\"h0d038f6c3b\">grid-template-columnsにsubgridを指定する\u003C\u002Fh3>\u003Cp>行方向と同様に、列方向にもサブグリッドを適用できます。\u003Ccode>grid-template-columns: subgrid\u003C\u002Fcode>を指定することで、親グリッドの列トラックを継承します。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.card {\n  display: grid;\n  grid-column: span 2; \u002F* 親グリッドの2列分を占有 *\u002F\n  grid-template-columns: subgrid; \u002F* 親グリッドの列トラックを継承 *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F8328d19f55104fdb9163f2a7de4ff6a3\u002FFrame%2036.png\" alt=\"\" width=\"1238\" height=\"328\">\u003C\u002Ffigure>\u003Cp>行方向・列方向の両方に同時にサブグリッドを適用することも可能です。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.card {\n  display: grid;\n  grid-row: span 4;\n  grid-column: span 2;\n  grid-template-rows: subgrid;\n  grid-template-columns: subgrid;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Ch2 id=\"h606940daec\">ギャップの継承\u003C\u002Fh2>\u003Cp>親グリッドに\u003Ccode>gap\u003C\u002Fcode>が設定されている場合、サブグリッドはそのギャップも継承します。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(4, auto);\n  gap: 32px; \u002F* このギャップがサブグリッドにも引き継がれる *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>サブグリッド側で独自の\u003Ccode>gap\u003C\u002Fcode>を指定することで、親グリッドのギャップを上書きすることも可能です。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.card {\n  display: grid;\n  grid-row: span 4;\n  grid-template-rows: subgrid;\n  gap: 16px; \u002F* 親グリッドのgapを上書き *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fbe109b3d78844d25a3eae471a6bf20f2\u002FFrame%2037.png\" alt=\"\" width=\"788\" height=\"517\">\u003C\u002Ffigure>\u003Ch2 id=\"h9deddcdd1b\">サブグリッドを使う上での注意点\u003C\u002Fh2>\u003Cp>サブグリッドを使う際に気をつけたいのが、カード内で使用する行数があらかじめ決まっている必要があるという点です。\u003C\u002Fp>\u003Cp>通常のグリッドでは、アイテムの数が増えても暗黙のグリッドが自動的に作成されるため、行き場のない要素が生まれることはありません。しかし、サブグリッドでは親グリッドから継承したトラックの範囲内でのみ動作するため、暗黙のグリッドが作成されません。\u003C\u002Fp>\u003Cp>例えば、3行分のトラックを継承したカードに4つ目の要素を追加した場合、4つ目の要素は新しい行に配置されるのではなく、最後の行（3行目）に重なって配置されてしまいます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fa1bedf4edd5045d884ade9df32d3a71f\u002FFrame%2038.png\" alt=\"\" width=\"788\" height=\"416\">\u003C\u002Ffigure>\u003Cp>サブグリッドを使用する際は、カード内の要素数が一定であることを確認したうえで、必要な行数を親グリッド側で適切に定義するようにしましょう。\u003C\u002Fp>\u003Ch2 id=\"h2d2663c089\">実践サブグリッド：カード型UI\u003C\u002Fh2>\u003Cp>ここまでの内容を踏まえて、実際のカード型UIにサブグリッドを適用してみます。cho-menの記事カードのような構成を例に考えてみましょう。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5575025087a24cf7b8869fb996f72b1d\u002Fimage.png\" alt=\"\" width=\"2077\" height=\"1354\">\u003C\u002Ffigure>\u003Cp>各カードは以下の3つの要素で構成されています。\u003C\u002Fp>\u003Cul>\u003Cli>サムネイル画像\u003C\u002Fli>\u003Cli>記事タイトル\u003C\u002Fli>\u003Cli>著者情報・投稿日\u003C\u002Fli>\u003C\u002Ful>\u003Cp>テキスト量の異なるカードが横並びになる場合、サブグリッドを使わないと各要素の縦位置がカードごとにバラバラになってしまいます。\u003C\u002Fp>\u003Cp>HTMLは以下のような構造を想定します。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-html\"><div class="grid-container">\n  <div class="card">\n    <img class="card-thumbnail" src="..." alt="...">\n    <h2 class="card-title">記事タイトル<\u002Fh2>\n    <div class="card-meta">著者名 \u002F 日付<\u002Fdiv>\n  <\u002Fdiv>\n  <div class="card">\n    <img class="card-thumbnail" src="..." alt="...">\n    <h2 class="card-title">記事タイトル<\u002Fh2>\n    <div class="card-meta">著者名 \u002F 日付<\u002Fdiv>\n  <\u002Fdiv>\n  ...略\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>CSSは以下のように指定します。\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(3, auto);\n  gap: 32px 16px;\n}\n\n.card {\n  display: grid;\n  grid-row: span 3; \u002F* 親グリッドの3行分を占有 *\u002F\n  grid-template-rows: subgrid; \u002F* 親グリッドの行トラックを継承 *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>親グリッドで3行分のトラックを定義し、各カードが\u003Ccode>grid-row: span 3\u003C\u002Fcode>で3行分を占有します。\u003Ccode>grid-template-rows: subgrid\u003C\u002Fcode>を指定することで、カード内の3つの要素がそれぞれ親グリッドの行トラックに沿って配置されます。\u003C\u002Fp>\u003Cp>タイトルのテキスト量が異なるカードが並んでいても、サムネイル・タイトル・著者情報の縦位置がカード間で揃うようになります。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F38ad0350f8004b5994f06107b4e6280c\u002FFrame%2039.png\" alt=\"\" width=\"1115\" height=\"787\">\u003C\u002Ffigure>\u003Ch3 id=\"hed0853fd3c\">ポイントまとめ\u003C\u002Fh3>\u003Cul>\u003Cli>親グリッドで\u003Ccode>grid-template-rows: repeat(3, auto)\u003C\u002Fcode>のように行トラックを定義する。\u003C\u002Fli>\u003Cli>カード側で\u003Ccode>grid-row: span 3\u003C\u002Fcode>を指定し、親グリッドの3行分を占有させる。\u003C\u002Fli>\u003Cli>カード側で\u003Ccode>grid-template-rows: subgrid\u003C\u002Fcode>を指定し、親グリッドの行トラックを継承する。\u003C\u002Fli>\u003Cli>これにより、テキスト量が異なるカード間でも、対応する要素の縦位置が揃う。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"hfb2153d23b\">サブグリッドをレイアウトの引き出しに\u003C\u002Fh2>\u003Cp>本記事では、CSSサブグリッドの基本的な仕組みと使い方を、カード型UIを例に紹介しました。サブグリッドを使うことで、これまで実現が難しかった「複数カード間での要素の縦位置揃え」をシンプルなCSSで実現できます。\u003C\u002Fp>\u003Cp>グリッドレイアウトの基本と組み合わせることで、より柔軟で整ったレイアウトを構築できるようになります。ぜひ、サブグリッドもレイアウト手法の引き出しのひとつとして活用してみてください。\u003C\u002Fp>\u003Ch2 id=\"h44e51f96ce\">参考資料\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout\" target=\"_blank\" rel=\"noopener noreferrer\">CSS グリッドレイアウト - MDN\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout\u002FSubgrid\" target=\"_blank\" rel=\"noopener noreferrer\">subgrid - MDN\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-grid-2\u002F\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Grid Layout Module Level 2\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>",[11],"フロントエンド",[13],{"id":14,"createdAt":15,"updatedAt":16,"publishedAt":15,"revisedAt":17,"name":18,"job":19,"avatar":20,"profile":23,"xId":24,"githubId":24},"koyama","2024-02-14T00:43:53.323Z","2024-03-20T13:41:39.499Z","2024-03-15T13:16:51.910Z","小山 樹人","フロントエンドエンジニア",{"url":21,"height":22,"width":22},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F74ad15c43b6042fe899472eb640b7db8\u002Fkoyama_202310.jpg",512,"静岡県出身。大学卒業後、桑沢デザイン研究所の夜間部でグラフィックデザインを学ぶ。専門誌や教育系の出版物を中心に、約10年間DTP制作の仕事に携わる。Webのフロントエンド開発の分野に興味を持ち、2023年に世路庵に入社。\nデザインと開発の両面からものづくりに携わっていきたい。","yamageji",{"url":26,"height":27,"width":28},"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F93ff2e3c93294ac887c59c2d56b6387a\u002Fsubgrid.png",720,1280,{"fieldId":30,"type":31},"ogpImage",[32],"タイプ1（タイトルのみ）",1780018664034]