[{"data":1,"prerenderedAt":33},["ShallowReactive",2],{"post-new-layout-method-introduction-to-css-grid-layout":3},{"id":4,"createdAt":5,"updatedAt":6,"publishedAt":7,"revisedAt":6,"title":8,"body":9,"categories":10,"author":12,"thumbnail":25,"ogpImage":29},"new-layout-method-introduction-to-css-grid-layout","2024-03-13T05:03:45.539Z","2024-04-02T04:36:25.833Z","2024-03-31T23:30:08.461Z","レイアウト手法の新しい武器になるCSSグリッドレイアウト入門","\u003Cp>CSSのグリッドレイアウトが、主要ブラウザーで利用可能になってからしばらく経ちました。しかし、floatやFlexboxなど従来の手法で目的のレイアウトが実現できることも多く、あまり活用できていないケースもあるのではないでしょうか。筆者自身も、まだまだその使いどころに迷うことが多いです。\u003C\u002Fp>\u003Cp>この記事では、CSSグリッドレイアウトの基本的な使い方を図版を交えて紹介します。基本のプロパティを整理し、実際のレイアウトでどのように活用できるのか見ていきたいと思います。\u003C\u002Fp>\u003Ch2 id=\"h7a7336c4fe\">CSSグリッドが得意なレイアウト\u003C\u002Fh2>\u003Cp>グリッドレイアウトは、格子状のグリッドを使用して要素の配置をコントロールするレイアウトシステムです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fa6c92d7b94b7471fa45314c99805c062\u002Fimage.png?w=1280&h=647\" alt=\"デザインの上に重ねられた12列のグリッド。\" width=\"1280\" height=\"647\">\u003Cfigcaption>引用：https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FLearn\u002FCSS\u002FCSS_layout\u002FGrids\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>上図のように、複数の行と列を使って柔軟なレイアウトを構築することが可能です。異なるビューポートサイズに応じてレイアウトを大きく切り替えるような、レスポンシブウェブデザインにも適しています。\u003C\u002Fp>\u003Ch3 id=\"h5000e108f0\">フレックスボックスとの違い\u003C\u002Fh3>\u003Cp>フレックスボックスは、要素を行と列のいずれかの方向にレイアウトしやすいように設計されています。それに対して、グリッドレイアウトは行と列に要素を並べます。フレックスボックスによる\u003Cstrong>1次元のレイアウト手法\u003C\u002Fstrong>と比較して、グリッドレイアウトは\u003Cstrong>2次元のレイアウト手法\u003C\u002Fstrong>であると考えられます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fdd8d8410475d4094afcc23c3fa176bca\u002FFrame%2033.png\" alt=\"1次元のレイアウトと2次元のレイアウト図\" width=\"1280\" height=\"979\">\u003C\u002Ffigure>\u003Cp>それぞれ、どのようなレイアウトに向いているか一概に言うことは難しいですが、1次元的であるか2次元的であるかを意識することで、ある程度使い分けの目安になるはずです。\u003C\u002Fp>\u003Ch3 id=\"hfc0b096f23\">ブラウザーの実装状況\u003C\u002Fh3>\u003Cp>グリッドレイアウトの各ブラウザーの実装状況を確認すると、Chrome、Edge、Safari、Firefoxの最新バージョンでいずれも利用可能となっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F2926776d7b5b4aba833e76db1ab1e6dc\u002Fcan-i-use_css-grid.png?w=1280&h=534\" alt=\"ブラウザーの実装状況を「Can I use」で確認したスクリーンショット\" width=\"1280\" height=\"534\">\u003C\u002Ffigure>\u003Cul>\u003Cli>\u003Ca href=\"http:\u002F\u002Fcaniuse.com\u002F#feat=css-grid\">Can I use ... | CSS Grid Layout\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"ha3d364629f\">グリッドレイアウトの構成要素\u003C\u002Fh2>\u003Cp>最初に、グリッドレイアウトに登場する構成要素と名称について、どのようなものがあるか整理します。\u003C\u002Fp>\u003Cul>\u003Cli>グリッドコンテナ：グリッドを構成する要素。\u003C\u002Fli>\u003Cli>グリッドアイテム：グリッドコンテナに配置する子要素。\u003C\u002Fli>\u003Cli>グリッドライン：グリッドを構成する縦横の線。\u003C\u002Fli>\u003Cli>グリッドトラック：グリッドの各行と列。\u003C\u002Fli>\u003Cli>グリッドセル：グリッドアイテムを配置するスペースの最小単位。\u003C\u002Fli>\u003Cli>グリッドエリア：複数のセルから構成させる範囲。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>グリッドコンテナ\u003C\u002Fstrong>と呼ばれる格子状の入れ物を用意し、その中に子要素として\u003Cstrong>グリッドアイテム\u003C\u002Fstrong>を配置していきます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe1a64772d0da42e880eba0765ba8abff\u002FFrame%2019.png\" alt=\"グリッドコンテナとグリッドアイテムの図\" width=\"1280\" height=\"1180\">\u003C\u002Ffigure>\u003Cp>グリッドコンテナ内では、縦横の\u003Cstrong>グリッドライン\u003C\u002Fstrong>でグリッドを構成します。各行と列を\u003Cstrong>グリッドトラック\u003C\u002Fstrong>と呼びます。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F00bcdd595e7a4870ab3b409515b7e97a\u002FFrame%2020.png\" alt=\"グリッドラインとグリッドトラックの図\" width=\"1280\" height=\"416\">\u003C\u002Ffigure>\u003Cp>グリッドアイテムを配置するスペースの最小単位が\u003Cstrong>グリッドセル\u003C\u002Fstrong>で、\u003Cstrong>グリッドエリア\u003C\u002Fstrong>は1つ以上のグリッドセルから構成されるスペースです。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F810b1bc2c98b471c887d235eef0e9e09\u002FFrame%2021.png\" alt=\"グリッドセルとグリッドエリアの図\" width=\"1280\" height=\"362\">\u003C\u002Ffigure>\u003Ch2 id=\"he5109110e6\">グリッドの作成\u003C\u002Fh2>\u003Cp>構成要素が確認できたので、ここから実際にグリッドを作成していきます。\u003C\u002Fp>\u003Cp>まず、グリッドコンテナとなる要素の\u003Ccode>display\u003C\u002Fcode>プロパティの値を\u003Ccode>grid\u003C\u002Fcode>に指定します（インライン要素として扱う際は\u003Ccode>inline-grid\u003C\u002Fcode>）。これでコンテナ内の要素がグリッドアイテムとして扱われるようになります。グリッドトラックのサイズを指定するには、列の指定を行う\u003Ccode>grid-template-columns\u003C\u002Fcode>と行の指定を行う\u003Ccode>grid-template-rows\u003C\u002Fcode>プロパティを使用します。\u003C\u002Fp>\u003Cdiv data-filename=\"HTML\">\u003Cpre>\u003Ccode class=\"language-html\"><div class="grid-container">\n  <div class="item-1">1<\u002Fdiv>\n  <div class="item-2">2<\u002Fdiv>\n  <div class="item-3">3<\u002Fdiv>\n  <div class="item-4">4<\u002Fdiv>\n  <div class="item-5">5<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: 100px 150px 50px;\n  grid-template-rows: 100px 50px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp>これで以下のようなグリッドが作成され、各セル内にグリッドアイテムが配置されます。（グリッド関連以外のスタイルは省略しています）。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F04e73c506a8446b88c01887cbe854fe7\u002FFrame%2010.png\" alt=\"グリッドのセル内にグリッドアイテムを配置した図\" width=\"1280\" height=\"394\">\u003C\u002Ffigure>\u003Ch3 id=\"h995c75e30e\">グリッドトラックのサイズ指定\u003C\u002Fh3>\u003Cp>グリッドトラックのサイズ指定には、\u003Ccode>px\u003C\u002Fcode>単位などに加えていくつかの特別な単位や指定方法も利用できます。\u003C\u002Fp>\u003Cp>\u003Cstrong>fr単位\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>\u003Ccode>fr\u003C\u002Fcode>単位は、トラックサイズをグリッドコンテナのサイズに対しての比率で指定する単位です。例えば、1列目、2列目、3列目を「2:3:1」の比率、1行目と2行目を「2:1」の比率で配置する場合、以下のような指定となります。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: 2fr 3fr 1fr;\n  grid-template-rows: 2fr 1fr;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fae869df43247496f8369a57a795ab2db\u002FFrame%2011.png\" alt=\"fr単位によってトラックサイズを割り振った図\" width=\"1280\" height=\"399\">\u003C\u002Ffigure>\u003Cp>通常の\u003Ccode>px\u003C\u002Fcode>単位などと混ぜても使えます。例えば、1列目を100pxで固定とし、残りのスペースで2列目3列目を「2:1」の比率で配置するといったことが可能です。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: 100px 2fr 1fr;\n  grid-template-rows: 2fr 1fr;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Ff42c786d827246899776574213797a82\u002FFrame%2012.png\" alt=\"fr単位とpx単位を同時に使用した際の図\" width=\"1280\" height=\"452\">\u003C\u002Ffigure>\u003Cp>\u003Cstrong>minmax()\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>トラックサイズの最小値と最大値を指定するには\u003Ccode>minmax()\u003C\u002Fcode>を利用できます。次の例では、列を通常「1:1:2」の比率で配置し、1列目は100px以下にならないように制御しています。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: minmax(100px, 1fr) 1fr 2fr;\n  grid-template-rows: 2fr 1fr;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F971f3f22e72042a2b377c0de7336f12c\u002FFrame%2013.png\" alt=\"minmax()を使用してトラックサイズを指定した図\" width=\"1277\" height=\"805\">\u003C\u002Ffigure>\u003Cp>\u003Cstrong>repeat()\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>同じパターンの指定を繰り返すときは、\u003Ccode>repeat()\u003C\u002Fcode>を利用できます。例えば\u003Ccode>2fr 2fr 1fr\u003C\u002Fcode>の列と\u003Ccode>100px 100px\u003C\u002Fcode>の行を構成するのに、以下のような指定が可能です。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(2, 2fr) 1fr;\n  grid-template-rows: repeat(2, 100px);\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F24ab718e28fa46468b342e7b74220477\u002FFrame%2014.png\" alt=\"repeat()を使用してトラックサイズを指定した図\" width=\"1280\" height=\"272\">\u003C\u002Ffigure>\u003Cp>その他にもauto、min-content、max-content、fit-contentといった値を組み合わせることで、コンテンツに合わせて柔軟にサイズ指定することが可能です。\u003C\u002Fp>\u003Cp>参考：\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-auto-columns#値\">https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-auto-columns#値\u003C\u002Fa>\u003C\u002Fp>\u003Ch3 id=\"hed0853fd3c\">ポイントまとめ\u003C\u002Fh3>\u003Cul>\u003Cli>グリッドコンテナとなる要素に対して\u003Ccode>display: grid\u003C\u002Fcode>（\u003Ccode>inline-grid\u003C\u002Fcode>）を指定する。\u003C\u002Fli>\u003Cli>\u003Ccode>grid-template-columns\u003C\u002Fcode>と\u003Ccode>grid-template-rows\u003C\u002Fcode>でグリッドトラックのサイズを指定する。\u003C\u002Fli>\u003Cli>トラックサイズの指定には、コンテナのサイズに対しての比率で指定する\u003Ccode>fr\u003C\u002Fcode>単位や最小値と最大値を指定する\u003Ccode>minmax()\u003C\u002Fcode>、同じパターンの指定を繰り返す\u003Ccode>repeat()\u003C\u002Fcode>などさまざまな単位や値を利用することができる。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h3542aa6ab8\">グリッドアイテムの配置\u003C\u002Fh2>\u003Cp>ここまでの例では、グリッドアイテムはグリッドトラック内に自動配置されていました。グリッドアイテムの配置位置をコントロールするためには、いくつかの方法が用意されています。\u003C\u002Fp>\u003Ch3 id=\"h650c2aa32e\">ラインによる配置先の指定\u003C\u002Fh3>\u003Cp>まず1つは、ラインによる配置先の指定方法があります。グリッドを作成すると自動的にグリッドラインに番号が割り振られます。このライン番号を利用してグリッドアイテムの配置先を指定できます。\u003C\u002Fp>\u003Cp>列のラインは左から右に、行のラインは上から下に向かって番号が振られます。逆方向には負の番号が振られ、どちらで指定することも可能です。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F53cc4bb7a48e4a8ab3cb6528f66f3e19\u002FFrame%2015.png\" alt=\"グリッドラインにライン番号を表示した図\" width=\"1369\" height=\"543\">\u003C\u002Ffigure>\u003Cp>列の配置先の指定には、\u003Ccode>grid-column-start\u003C\u002Fcode>と\u003Ccode>grid-column-end\u003C\u002Fcode>プロパティを使用し、この2つのプロパティを一括指定する\u003Ccode>grid-column\u003C\u002Fcode>プロパティも利用できます。同様に、行の配置先は\u003Ccode>grid-row-start\u003C\u002Fcode>と\u003Ccode>grid-row-end\u003C\u002Fcode>の各プロパティを使用し、\u003Ccode>grid-row\u003C\u002Fcode>プロパティで一括指定が可能です。例えば、グッリッドアイテムを行のライン1～2、列のライン2～4の中に配置するには以下のように指定します。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.item-1 {\n  grid-column-start: 2;\n  grid-column-end: 4;\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n\u002F* 一括指定プロパティでまとめて指定した場合 *\u002F\n.item-1 {\n  grid-column: 2 \u002F 4;\n  grid-row: 1 \u002F 2;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fe4cd2c88ac80403fa857b6175ba2d086\u002FFrame%2016.png\" alt=\"グリッドラインによる指定でグリッドアイテムを配置した図\" width=\"1341\" height=\"540\">\u003C\u002Ffigure>\u003Cp>ラインには任意で名前をつけることも可能です。ライン名は\u003Ccode>grid-template-columns\u003C\u002Fcode>と\u003Ccode>grid-template-rows\u003C\u002Fcode>でトラックを設定する際に\u003Ccode>[]\u003C\u002Fcode>を使って指定します。ライン名はスペースで区切って複数指定することも可能です。また、便利な使い方として、ライン名を「**-start \u002F **-end」といった名前にしておくと、「**」と書くだけで指定できます。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: 100px [first-start] 150px 50px [first-end];\n  grid-template-rows: [first-start] 100px [first-end] 50px;\n}\n\n.item-1 {\n  grid-column: first-start \u002F first-end;\n  grid-row: first-start \u002F first-end;\n}\n\n\u002F* 以下のようにも省略可能 *\u002F\n.item-1 {\n  grid-column: first;\n  grid-row: first;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fc5dec2d2fded46929f9adb2d1df099a2\u002FFrame%2017.png\" alt=\"グリッドラインの名前を表示した図\" width=\"1459\" height=\"497\">\u003C\u002Ffigure>\u003Ch3 id=\"h6674e28268\">エリアによる配置先の指定\u003C\u002Fh3>\u003Cp>ラインによる指定の他に、グリッドにエリアを設定し配置先を指定する方法があります。\u003C\u002Fp>\u003Cp>エリアの設定には\u003Ccode>grid-template-areas\u003C\u002Fcode>プロパティを使用し、アスキーアートのような書式で各セルに名前を指定します。同名のセルは同じエリアとして扱われ、例えば以下のように指定できます。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-areas:\n    "area1 area2 area3"\n    "area1 area4 area4";\n  grid-template-columns: 100px 150px 50px;\n  grid-template-rows: 100px 50px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F5ac5ba9b119546e2a83ebc3daf5f98c8\u002FFrame%2022.png\" alt=\"グリッドをグリッドエリアに分割した図\" width=\"1280\" height=\"457\">\u003C\u002Ffigure>\u003Cp>各グリッドアイテムに\u003Ccode>grid-area\u003C\u002Fcode>プロパティを指定することで、該当のエリアに配置できます。\u003C\u002Fp>\u003Cdiv data-filename=\"HTML\">\u003Cpre>\u003Ccode class=\"language-html\"><div class="grid-container">\n  <div class="item-1">1<\u002Fdiv>\n  <div class="item-2">2<\u002Fdiv>\n  <div class="item-3">3<\u002Fdiv>\n  <div class="item-4">4<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.item-1 {\n  grid-area: area1;\n}\n.item-2 {\n  grid-area: area2;\n}\n.item-3 {\n  grid-area: area3;\n}\n.item-4 {\n  grid-area: area4;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F55548eff37eb475486c5904f13b948ed\u002FFrame%2023.png\" alt=\"グリッドエリアにグリッドアイテムを配置した図\" width=\"1280\" height=\"339\">\u003C\u002Ffigure>\u003Cp>また、エリアとトラックサイズの指定には一括指定プロパティの\u003Ccode>grid-template\u003C\u002Fcode>を利用することで、まとめて指定することも可能です。エリアの行ごとにトラックサイズを記述し、列のトラックサイズは\u003Ccode>\u002F\u003C\u002Fcode>で区切って最後に記述します。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template:\n    "area1 area2 area3" 100px\n    "area1 area4 area4" 50px\n    \u002F 100px 150px 50px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp>上記のように、グリッドレイアウトでは同様の指定に対して複数の記述方法が用意されていることが多いです。どの記述方法が良いかは好みの問題も大きいですが、プロジェクト内である程度統一されていると良さそうです。\u003C\u002Fp>\u003Ch3 id=\"hed0853fd3c\">ポイントまとめ\u003C\u002Fh3>\u003Cul>\u003Cli>グリッドアイテムの配置方法はラインによる指定と、エリアによる指定がある。\u003C\u002Fli>\u003Cli>ライン番号は自動で割り振られ、別途ライン名を指定することもできる。\u003C\u002Fli>\u003Cli>ラインによる配置先の指定には、\u003Ccode>grid-column-start\u003C\u002Fcode> \u003Ccode>grid-column-end\u003C\u002Fcode> \u003Ccode>grid-column\u003C\u002Fcode> \u003Ccode>grid-row-start\u003C\u002Fcode> \u003Ccode>grid-row-end\u003C\u002Fcode> \u003Ccode>grid-row\u003C\u002Fcode>の各プロパティを使用する。\u003C\u002Fli>\u003Cli>\u003Ccode>grid-templage-areas\u003C\u002Fcode>プロパティを使用すると、各セルにエリア名を指定し、\u003Ccode>grid-area\u003C\u002Fcode>プロパティでアイテムを各エリアに配置することができる。\u003C\u002Fli>\u003Cli>エリアとトラックサイズの指定には一括指定プロパティの\u003Ccode>grid-template\u003C\u002Fcode>が利用できる。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h7bbcdad321\">レイアウトの調整\u003C\u002Fh2>\u003Ch3 id=\"h3da78e8e3e\">グリッドアイテムの間隔\u003C\u002Fh3>\u003Cp>グリッドアイテムの間隔の指定には、列の間隔を指定する\u003Ccode>column-gap\u003C\u002Fcode>と行の間隔を指定する\u003Ccode>row-gap\u003C\u002Fcode>の各プロパティを使用します。またそれらを一括で指定する\u003Ccode>gap\u003C\u002Fcode>プロパティも利用できます。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-rows: repeat(2, 100px);\n  row-gap: 8px;\n  column-gap: 16px;\n}\n\n\u002F* 一括指定プロパティで指定 *\u002F\n.grid-container {\n  gap: 8px 16px;\n  \u002F* 列と行の間隔が同じ場合は以下のようにも指定できる *\u002F\n  gap: 8px;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F682d2d1ba48e441f80c1839e8f40bb4f\u002FFrame%2024.png\" alt=\"グリッドにgapを追加し表示した図\" width=\"1280\" height=\"581\">\u003C\u002Ffigure>\u003Ch3 id=\"hd22052cd2c\">グリッドの位置揃え\u003C\u002Fh3>\u003Cp>グリッドコンテナ内でトラックの配置位置を指定するには\u003Ccode>justify-content\u003C\u002Fcode>と\u003Ccode>aligin-content\u003C\u002Fcode>を使用します。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(2, 100px) minmax(100px, auto);\n  grid-template-rows: repeat(2, 100px);\n  justify-content: start; \u002F* 左寄せで表示 *\u002F\n  align-content: center; \u002F* 天地センターに表示 *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp>使用できる値は主に以下のようなものがあります。\u003C\u002Fp>\u003Cul>\u003Cli>start：コンテナの先頭側の端に向けて寄せて配置。\u003C\u002Fli>\u003Cli>end：コンテナの末尾側の端に向けて寄せて配置。\u003C\u002Fli>\u003Cli>center：コンテナの中央に寄せて配置。\u003C\u002Fli>\u003Cli>space-between：トラック間に均等にスペースを入れて配置。\u003C\u002Fli>\u003Cli>space-around：トラック間に均等にスペースを入れ、外側にその半分のスペースを入れて配置。\u003C\u002Fli>\u003Cli>space-evenly：トラック間と外側に均等にスペースを入れて配置。\u003C\u002Fli>\u003Cli>stretch：サイズが \u003Ccode>auto\u003C\u002Fcode> なトラックがあれば余りのスペースを割り振る。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Ccode>justify-content\u003C\u002Fcode>に各値を指定した際のレイアウトを図にまとめると、のようになります。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F49c806f8804b4d498ad7a06e444219ac\u002FFrame%203.png\" alt=\"justify-contentの値によって、表示が変更される様子を説明した図\" width=\"1280\" height=\"1540\">\u003C\u002Ffigure>\u003Cp>また、この2つのプロパティをまとめて指定する\u003Ccode>place-content\u003C\u002Fcode>プロパティも利用できます。例えば\u003Ccode>place-content: center\u003C\u002Fcode>と指定すると、コンテナ内の上下左右センターに配置することが可能です。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(2, 100px) minmax(100px, auto);\n  grid-template-rows: repeat(2, 100px);\n  gap: 8px;\n  place-content: center;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Feda3cb2a798e4a648b0300b5fc21ad0b\u002FFrame%2028.png\" alt=\"「place-content: center」とした際の表示を表した図\" width=\"1244\" height=\"645\">\u003C\u002Ffigure>\u003Ch3 id=\"hd45e11905e\">グリッドアイテムの位置揃え\u003C\u002Fh3>\u003Cp>トラック内に配置されたグリッドアイテムの位置揃えには、横方向を制御する\u003Ccode>justify-self\u003C\u002Fcode>と縦方向を制御する\u003Ccode>align-self\u003C\u002Fcode>を使用します。使用できる値は主に以下のようなものがあります。\u003C\u002Fp>\u003Cul>\u003Cli>start：コンテナの開始側に向かって詰めて配置。\u003C\u002Fli>\u003Cli>end：コンテナの終了側に向かって詰めて配置。\u003C\u002Fli>\u003Cli>center：コンテナの中央に詰めて配置。\u003C\u002Fli>\u003Cli>baseline：ベースラインで揃えて配置。\u003C\u002Fli>\u003Cli>stretch：4辺をトラックに揃えて配置。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>例として、各グリッドアイテムに対して\u003Ccode>justify-self\u003C\u002Fcode>の値を指定すると、画像のような表示となります。\u003C\u002Fp>\u003Cdiv data-filename=\"HTML\">\u003Cpre>\u003Ccode class=\"language-html\"><div class="grid-container">\n  <div class="item-1">1<\u002Fdiv>\n  <div class="item-2">2<\u002Fdiv>\n  <div class="item-3">3<\u002Fdiv>\n  <div class="item-4">4<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(2, 100px);\n}\n\n.item-1 {\n  justify-self: start;\n}\n.item-2 {\n  justify-self: end;\n}\n.item-3 {\n  justify-self: center;\n}\n.item-4 {\n  justify-self: stretch;\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F64bf37124daf45f688f6dfcd66411be8\u002FFrame%2029.png\" alt=\"justify-selfの値によって、表示が変更される様子を説明した図\" width=\"1244\" height=\"378\">\u003C\u002Ffigure>\u003Cp>また、コンテナ側でこれらの値をまとめて指定するためには、\u003Ccode>justify-items\u003C\u002Fcode>と\u003Ccode>align-items\u003C\u002Fcode>を使用できます。さらにこの2つのプロパティの一括指定には\u003Ccode>place-items\u003C\u002Fcode>プロパティが利用できます。\u003C\u002Fp>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(2, 100px);\n  justify-items: center; \u002F* コンテナ内の全ての横方向の位置揃えをセンターに *\u002F\n  align-items: center; \u002F* コンテナ内の全ての縦方向の位置揃えをセンターに *\u002F\n}\n\n\u002F* place-itemsを使用した場合 *\u002F\n.grid-container {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-template-rows: repeat(2, 100px);\n  place-items: center; \u002F* justify-itemsとalign-itemsを同時に指定 *\u002F\n}\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp>上記どちらの記述でも、以下のように天地左右センターの配置となります。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002Fab31813dba88495091cd3eb07ab6df96\u002FFrame%2030.png\" alt=\"「place-items: center」とした際の表示を説明する図\" width=\"1244\" height=\"457\">\u003C\u002Ffigure>\u003Ch3 id=\"hed0853fd3c\">ポイントまとめ\u003C\u002Fh3>\u003Cul>\u003Cli>グリッドアイテム同士の間隔の指定には\u003Ccode>column-gap\u003C\u002Fcode>と\u003Ccode>row-gap\u003C\u002Fcode>プロパティ、またはそれらを一括指定する\u003Ccode>gap\u003C\u002Fcode>プロパティを使用する。\u003C\u002Fli>\u003Cli>グリッドコンテナ内のトラックの配置位置の指定には\u003Ccode>justify-content\u003C\u002Fcode>と\u003Ccode>aligin-content\u003C\u002Fcode>プロパティ、またはそれらを一括指定する\u003Ccode>place-content\u003C\u002Fcode>プロパティを使用する。\u003C\u002Fli>\u003Cli>トラック内に配置されたグリッドアイテムの配置位置の指定には\u003Ccode>justify-self\u003C\u002Fcode>と\u003Ccode>align-self\u003C\u002Fcode>プロパティを使用する。\u003C\u002Fli>\u003Cli>グリッドアイテムの位置揃えをコンテナ側で指定するには、\u003Ccode>justify-items\u003C\u002Fcode>と\u003Ccode>align-items\u003C\u002Fcode>プロパティ、またはそれらを一括指定する\u003Ccode>place-items\u003C\u002Fcode>プロパティを使用する。\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"h187f66aca5\">実践グリッドレイアウト：レスポンシブなボタンUI\u003C\u002Fh2>\u003Cp>ここまで、グリッドレイアウトに関する基本的なプロパティの使用方法を見てきました。最後に少し具体的な利用例を考えてみたいと思います。\u003C\u002Fp>\u003Cp>cho-menの記事の末尾には、記事をシェアするためのボタンUIが配置されています。このUIは、画面幅に応じて伸縮し、一定幅でカラム落ちする仕様となっています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F6a84888706f8405e8a203499f4b62953\u002FFrame%2031.png\" alt=\"記事のシェアボタンのUIのスクリーンショット。画面幅に応じた表示が表されている。\" width=\"1280\" height=\"1102\">\u003C\u002Ffigure>\u003Cp>シンプルなUIですが、カラム落ちした際に列ごとの幅を揃える処理など意外と考慮事項が多いです。フレックスボックスを利用したり、他のレイアウト方法でも実現可能そうですが、グリッドを使用すると比較的簡単に実装できます。\u003C\u002Fp>\u003Cp>必要な要件を整理すると以下のようになります。\u003C\u002Fp>\u003Cul>\u003Cli>各ボタンのサイズは均一とする。\u003C\u002Fli>\u003Cli>画面幅に合わせて伸縮する。\u003C\u002Fli>\u003Cli>要素間のスペースは一定。\u003C\u002Fli>\u003Cli>各ボタンが一定のサイズ以下になるとカラム落ちする。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>HTMLを用意し、グリッドコンテナ内にボタン要素を配置します。各ボタンの最小幅を\u003Ccode>150px\u003C\u002Fcode>としたい場合、コンテナ側の\u003Ccode>grid-template-columns\u003C\u002Fcode>を以下のように指定することで、要件を満たしたレイアウトが可能となります。アイテム側では幅の指定を特に行っていません。\u003C\u002Fp>\u003Cdiv data-filename=\"HTML\">\u003Cpre>\u003Ccode class=\"language-html\"><div class="grid-container">\n  <button type="button" class="item-1">1<\u002Fbutton>\n  <button type="button" class="item-2">2<\u002Fbutton>\n  <button type="button" class="item-3">3<\u002Fbutton>\n  <button type="button" class="item-4">4<\u002Fbutton>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv data-filename=\"CSS\">\u003Cpre>\u003Ccode class=\"language-css\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); \u002F* ここがポイント *\u002F\n  gap: 8px;\n}\n\n.item-1 {\n  padding: 16px;\n  border-radius: 4px;\n  border: none;\n  background-color: var(--color-red);\n}\n.item-2 { ... } \u002F* 以下略 *\u002F\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cp>ポイントはグリッドコンテナに指定した、\u003Ccode>grid-template-columns\u003C\u002Fcode>の値です。\u003Ccode>repeat()\u003C\u002Fcode>の1つめの引数に\u003Ccode>auto-fit\u003C\u002Fcode>を指定することで、コンテナとトラックの幅に応じて自動で繰り返し回数（列数）が計算されます。2つ目の引数には\u003Ccode>minmax(150px, 1fr)\u003C\u002Fcode>を指定し、トラックの最小値を\u003Ccode>150px\u003C\u002Fcode>、最大値を\u003Ccode>1fr\u003C\u002Fcode>としています。\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fimages.microcms-assets.io\u002Fassets\u002F2e326e11eb0942a5ad843f163281c5af\u002F8e47262616884270afc8fdaf56b95d11\u002FFrame%2032.png\" alt=\"指定の「grid-template-columns」によって、画面幅に応じた表示の切り替えを説明した図\" width=\"1280\" height=\"1367\">\u003C\u002Ffigure>\u003Cp>CSSグリッドの使用用途として、ページ全体など大きな単位でのレイアウトが考えられます。しかし、使い方次第ではこのような小さなUI内でも、便利に利用できます。さまざまな箇所で、グリッドが利用できないか考えてみると、レイアウトの楽しみが広がるのではないでしょうか。\u003C\u002Fp>\u003Ch2 id=\"h2b309e1f3d\">グリッドをレイアウト手法の引き出しに\u003C\u002Fh2>\u003Cp>本記事では、CSSグリッドレイアウトに必要な基本プロパティの使い方をまとめました。今回紹介したもの以外にも、グリッドを入れ子にして親子のグリッドを連動させる\u003Cstrong>サブグリッド\u003C\u002Fstrong>の機能など、まだまだ便利な機能が存在します。従来の方法では実装難易度の高かったレイアウトも、グリッドを使用することで簡単に実現できる場合があります。ぜひ、レイアウト手法の引き出しのひとつとして、CSSグリッドを活用してみてください。\u003C\u002Fp>\u003Ch3 id=\"h44e51f96ce\">参考資料\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">CSS グリッドレイアウト - MDN\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-grid-2\u002F\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">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\u002F696f984c1e814c10992ac319fb749157\u002Fcss-grid-standard.jpg",720,1280,{"fieldId":30,"type":31},"ogpImage",[32],"タイプ1（タイトルのみ）",1776401660706]