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

2022年8月7日2023年7月30日

ギャラリーのようなサイトを作りたいです。

今回はこのようなレイアウトができるグリッドレイアウトについてみていきましょう。

【HTML＆CSS】ギャラリーサイトを作る（FlexBox)

旅行の写真を使ってギャラリーのようなサイトを作りたいです。今回はFlexBoxレイアウトを使ってこのよ ...

https://www.beginavi.net/htmlcss-flexbox/

★この記事の目次★

1. gridレイアウト
2. グリッドレイアウト（基本）
3. 応用

gridレイアウト

gridレイアウトは列と行で格子状に要素を並べていくレイアウトです。

デザインがしやすくギャラリーサイトのようなサイトに利用されます。

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

【HTML】

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

HTML　コードを見る

<body>
  <section class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
    <div class="item4">4</div>
    <div class="item5">5</div>
    <div class="item6">6</div>
    <div class="item7">7</div>
    <div class="item8">8</div>
    <div class="item9">9</div>
  </section>
</body>

【CSS】

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

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

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

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

css　コードを見る

.container {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: 200px 200px 200px;
}

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

幅指定を増やす

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

CSS　コードを見る

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px 200px 200px;
  grid-template-rows: 200px 200px 200px;
}

すると5列になります

要素の間に余白をつける

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

CSS　コードを見る

.container {
  display: grid;
  grid-template-columns: 300px 300px 300px;
  grid-template-rows: 300px 300px 300px;
  gap: 10px;
}

10px付けてみました。

比率で指定

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

CSS　コードを見る

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
}

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

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

CSS　コードを見る

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 100px 100px;
}

応用

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

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

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

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

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

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

CSSコードを見る

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;/*列の数だけ必要*/
  grid-template-rows: 100px 100px 100px 100px 100px;/*行の数だけ必要*/
  grid-template-areas: 
 "item1 item1 item1"
 "item2 item2 item3"
 "item4 item4 item3"
 "item5 item6 item7"
 "item5 item8 item9";
}

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