【HTML＆CSS】ギャラリーサイトを作る（グリッドレイアウト）

2022年8月7日

gridレイアウト

gridレイアウトは列と行で格子状に要素を並べていくレイアウトでデザインがしやすくギャラリーサイトのようなサイトに利用されます。

グリッドレイアウト（基本）

【HTML】

タイル状に並べたい要素を親要素（containerというクラス名を付けました)で囲みます。

【CSS】

親要素に『display:grid;』をかけます。

『grid-template-columns』で必要なグリッドアイテムの数だけ幅を指定します。

今回は『300px 300px 300px』と3列です。

次に『grid-template-rows』で高さの指定をします。

するとこんな感じ。
分かりやすいように『background-color』を付けています。

幅指定を増やす

幅の指定を5個してみます

すると5列になります

要素の間に余白をつける

列と列行と行の余白は『gap』で指定します。

10px付けてみました。

比率で指定

今までpxで指定していましたが、『1fr 1fr 1fr』とすると比率で指定する事ができます。

1：1：1の比率になる。

『1fr 2fr 1fr』にすると『1：2：1』つまり『25％：50％：25％』になります。

応用

『grid-template-areas』を使うともっと自由な表現ができます。

親要素に『grid-template-areas：』

それぞれの子要素全てに対応する名前を『grid-area：』で付けます。

『grid-area:item1;』のようにします。

並べるとこのように要素を並べることができます。

するとこのように自由な並べ方ができます。

このように簡単にタイル状のレイアウトをすることができます。