要素をただ単に横並びにするだけであれば、display:flex;で横並びにするのが一番楽ですし、その後の配置調整もしやすいです。（要素の横並びについての記事は▶︎こちら）
では、田んぼの「田」の字のように横並びというよりは格子状・方眼状にしたいという場合はどうでしょうか？具体的には下のようなイメージです。
| 要素１ | 要素２ | 要素３ |
| 要素４ | 要素５ | 要素６ |
| 要素７ | 要素８ | 要素９ |
こういった場合でも、もちろんdisplay:flex;で配置することは可能です。ただし、display:flex;でやろうと思うと、けっこう面倒くさいです。
display:flex;で格子状にキレイに並べようと思ったら、フレックスボックスの幅に合わせて余白を計算に含めた上でフレックスアイテムの幅を指定し、さらにフレックスアイテムの折り返しを指定しなければなりません。
また、後になって列を増やしたいとなった時など、レイアウトに何か変更が出るたびにフレックスアイテムの幅や余白をそれぞれ設定し直す必要があります。
…とは言え、ここまでであれば別にフレックスボックスでもなんとかやれそうな気がしてしまいます。
では、さらに「要素の一部だけ広く幅を取りたい」という場合はどうでしょうか？具体的は以下のような感じです。
| 要素１ | 要素２ | 要素３ |
| 要素４ | 要素５ |
これをフレックスボックスでやろうと思ったら、
１）要素１を用意
２）要素２〜５をフレックスボックスでレイアウト
３）要素１と要素２〜５をさらにフレックスボックスでレイアウト
といった手順になってしまいます。なんというかこれはもう、すごく面倒くさいですよね。笑
そこで、今回はこういった規則正しいグリッド状のレイアウトが得意なCSSを紹介していきます！
ただフレックスボックスもそうですが、グリッドレイアウトも奥が深くて一度に説明すると混乱しちゃうので（僕が）、今回は基礎に絞って説明していきます。
◆ display:grid、grid-template-columnsとは ◆
display:grid（ディスプレイ：グリッド）とは、要素をグリッドレイアウトにする指定です。gridは、displayプロパティの値の１つです。
display:flex;と同じように、グリッド状に配置したいアイテムそのものではなく、親要素に設定します。ただ、display:flex;とは決定的に異なる点があります。それが、
display:grid;としただけでは、見た目上の変化は起こらないという点です。
横並びにする場合と違って、グリッド状にするには、「何列にするか」という列数（カラムの数）を指定しなければグリッド状に並べようがないからです。
そのためグリッドレイアウトを指定する場合は、カラムの数と幅を指定するCSSプロパティの「grid-template-columns（グリッドテンプレートカラムズ）」をdisplay:grid;とセットで指定します。
grid-template-columnsとは、グリッドレイアウトの列（カラム）を、どれぐらいの幅で何列にするか？という設定を行うためのCSSプロパティです。
grid-template-columnsの値は、数値＋単位もしくはキーワード値で指定します。
基本的には「widthの設定」と同じだと思って大丈夫です。pxといった一般的な単位の他、autoやfit-contentなどのキーワード値があります。widthについての記事は▶︎こちら
また、gird-template-columnsはカラムの数だけ値を指定します。例えばカラムの数を３にして、なおかつ１列あたり200pxの幅にしたい場合は、以下のようになります。
＊grid-template-columnsの構文例
■ セレクタ { gird-template-columns: 200px 200px 200px; }
値と値の間に「,（カンマ）」などは入らないので注意してくださいね。
それでは注意点に気をつけながら、サンプルコードと表示結果を見ていきましょう！
<div class="gridbox1">
<p class="grid">グリッド１</p><p class="grid">グリッド２</p><p class="grid">グリッド３</p>
<p class="grid">グリッド４</p><p class="grid">グリッド５</p><p class="grid">グリッド６</p>
</div>
.gridbox1 {
display: grid;
grid-template-columns: 200px 200px 200px;
overflow-x: scroll;
}
.gridbox1 p {
background-color: lightgreen;
padding:10px;
margin: 5px;
}
.gridbox1 p:nth-child(2n+1) {
color: white;
background-color: darkgreen;
}
グリッド１
グリッド２
グリッド３
グリッド４
グリッド５
グリッド６
というわけで、横２×縦３列の格子状にすることができました。しかし、上記の例ではgrid-template-columnsを全て200pxにしているので、表示させるのに少なくとも200×3＝600px以上の幅がないと納まりません。なので、スマホから見てくださっている方はグリッドレイアウトの中で右にスクロールができるようになっていると思います。
ですが、できればPCでは広く表示して、スマホではキュッと納まるようにしたいですよね。しかも全て同じ幅か、一定の比率（２：１：１など）で揃えたい場合が多いです。そこで、grid-template-columnsにはフレックスボックスにはない単位が用意されています。
それが、「fr（fractionの略）」という単位です。
細かいことはさておき、簡単に説明すると、
1fr＝基準の幅で、2fr＝1frの２倍ということになります。
すなわち、３列のカラムを設定するとして、全て同じ幅で画面幅・親要素幅に合わせて伸び縮みさせたい場合は、
■ セレクタ { grid-template-columns: 1fr 1fr 1fr; }
ということになりますし、１列目を他の列の２倍の幅にしたい場合は、
■ セレクタ { grid-template-columns: 2fr 1fr 1fr; }
と指定すれば良いことになります。以下は、2fr 1fr 1fr と指定した場合のサンプルコードと表示結果です。
<div class="gridbox1">
<p class="grid">グリッド１</p><p class="grid">グリッド２</p><p class="grid">グリッド３</p>
<p class="grid">グリッド４</p><p class="grid">グリッド５</p><p class="grid">グリッド６</p>
</div>
.gridbox1 {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
.gridbox1 p {
background-color: lightgreen;
padding:10px;
margin: 5px;
}
.gridbox1 p:nth-child(2n+1) {
color: white;
background-color: darkgreen;
}
グリッド１
グリッド２
グリッド３
グリッド４
グリッド５
グリッド６
というワケで、画面（親要素）幅に合わせて伸び縮みさせつつ、グリッドアイテムの幅の比率を一定に保つことができました。
この「fr（フラクション）」は、グリッドレイアウトではとても大切でよく使う単位なので、しっかり使いこなせるように練習してみてくださいね！
- POINT!
- ・display:grid;でグリッドを定義できるが、これだけでは見た目は変わらない！
- ・グリッド表示にするには、grid-template-columnsを指定する必要がある！
- ・grid-template-columnsは、列の数だけ値を指定する！
- ・grid-template-columnsでは、fr（フラクション）という単位が使えて、要素の幅に合わせて一定の比率を保ったまま伸び縮みさせることができる！
◆ グリッド線の考え方 ◆
冒頭で例に出した、「一部のアイテムだけ縦・横に広く幅を取りたい」という場合の、下の図をもう一度ご覧ください。
| 要素１ | 要素２ | 要素３ |
| 要素４ | 要素５ |
こういったレイアウトを設定したい場合には、grid-row-start(end)と、grid-column-start(end)というCSSをグリッドアイテムに指定する必要があるのですが、それにはまず「グリッド線」を理解することが欠かせません。
なのでCSSの調整を紹介する前に、まずはグリッド線について解説をしていきます。
＊グリッド線の考え方＊
グリッドレイアウトはいわゆる「格子状（網目状）」の配置になるので、表のように行と列ができます。そして、行と列をラインで表すことができます。これが、グリッド線です。
行と列があるということは、２種類のグリッド線があるということになります。
そしてグリッド線の理解で最も大切なポイントは、それぞれどこを１本目と数えるか？に尽きます。
下の図をご覧ください。
グリッド状に配置された要素の行に赤い線、列に青い線でそれぞれラインを引いています。そして、ラインには番号がついています。
| １ | ２ | ３ | ４ |
grid１ |
grid２ |
grid３ |
１ |
grid４ |
grid５ |
grid６ |
２ |
grid７ |
grid８ |
grid９ |
３ |
| ４ |
赤線はgrid-rowのライン
青線はgrid-columnのライン
図中にも書いてますが、赤い線が「grid-row」と呼ばれるラインで、青い線が「grid-column」と呼ばれるラインです。そして、１から順に数えていきます。
grid-rowであれば上端が１本目、grid-columnであれば左端が１本目となります。
そして、一部のグリッドアイテムの幅を調整するにはアイテムに対して、「グリッド線のどこからどこまで幅を取るか？」という指定をします。
その調整CSSプロパティが、grid-row-start(end)、grid-column-start(end)というワケです。
- POINT!
- ・グリッドアイテムの一部の幅を広く取るには、グリッド線を理解する必要がある！
- ・グリッド線とは、グリッドレイアウトの行と列のライン！
- ・行（横線）が、grid-rowのライン！（上から下に数える）
- ・列（縦線）が、grid-columnのライン！（左から右に数える）
◆ グリッドアイテムの一部の大きさを変えるには ◆
グリッド線の概念がわかれば、一部のグリッドアイテムだけ幅を変えるのも簡単です。考え方としては、「グリッド線のどこからどこまで幅を取るか」という指定を行うことで、幅を確保します。
例えば下図のように、３×３＝合計９つのグリッドアイテムがあったとします。
| 要素１ | 要素２ | 要素３ |
| 要素４ | 要素５ | 要素６ |
| 要素７ | 要素８ | 要素９ |
そして、要素１を左上の４マス分（要素１、要素２、要素４、要素５）の幅に広げたいとしましょう。
この時、grid-row-startと、grid-column-startはどちらも「１」です。それぞれ上端と左端がスタートですからね。
そしてgrid-row-endは「３」になります。グリッドアイテムの間に余白をつけているので、要素１の下の線と要素４の上の線が別のものに見えてしまいますが、これは１本のラインであると考えます。
そして同様に考えて、grid-column-endも「３」になります。
また、display:grid;と、grid-template-columnsは親要素に設定しますが、grid-row-startなどはグリッドアイテムに指定します。
こういうのは一度サンプルコードと表示結果を見てみた方が早いので、確認していきましょう！
<div class="gridbox1">
<p class="grid griditem">グリッド１</p><p class="grid">グリッド２</p><p class="grid">グリッド３</p>
<p class="grid">グリッド４</p><p class="grid">グリッド５</p><p class="grid">グリッド６</p>
<p class="grid">グリッド7</p><p class="grid">グリッド8</p><p class="grid">グリッド9</p>
</div>
.gridbox1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.gridbox1 p {
background-color: lightgreen;
padding:10px;
margin: 5px;
}
.gridbox1 p:nth-child(2n+1) {
color: white;
background-color: darkgreen;
}
.griditem {
background-color: darkorange !important;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start:1 ;
grid-column-end: 3;
}
グリッド１
グリッド２
グリッド３
グリッド４
グリッド５
グリッド６
グリッド７
グリッド８
グリッド９
grid-row-startなどのプロパティを設定したグリッドアイテム１のみ、左上４マス（グリッドアイテム４個分）に広げることができました。
このgrid-row-start(end)、grid-column-start(end)、それぞれ値を変えるとどうなるか試したいですよね？笑
ということで、ボックスの数値がgrid-row-startなどの値に反映される機能を用意しました。色々と試してみて、グリッド線の考え方を理解するのに役立ててください！
change item
grid2
grid3
grid4
grid5
grid6
grid7
grid8
grid9
grid-row-start
grid-row-end
grid-column-start
grid-column-end
＊タブが全て表示されていない場合は右にスクロールできます＊
このグリッド線という考え方はフレックスボックスには無く、グリッドレイアウトの自由度を高めている一方で複雑にしている要因でもあります。そのため、単に横並びにするだけで良いのであれば、どちらかと言うとフレックスボックスの方が容易です。
Webサイトメニューの横並びはフレックスボックス、画像ギャラリーはグリッドレイアウトなど、用途や目的に応じて使い分けられるようになることが大切です。
- POINT!
- ・グリッドアイテムの一部だけ広く幅を取りたい場合は、grid-row-start(end)、grid-column-start(end)を使う！
- ・それぞれ「グリッド線のどこからどこまで幅を取るか」という意味になる！
- ・用途に応じてフレックスボックスとの使い分けが大事！
