CSSグリッドレイアウトをマスターして美しく写真を配置してみよう

2020年12月26日2021年4月10日CSS

グリッドレイアウトは、CSSの比較的新しい技術です。
グリッドレイアウトが使えるようになると、とてもおしゃれに写真やカードを配置することができるようになります。

ではグリッドレイアウトは具体的にどのようにしたら使えるようになるのでしょうか？
基本的なところから解説していくので、しっかりと学んでいきましょう。

グリッドレイアウトの使い方

グリッドレイアウトを使う手順は以下の通りです。

• グリッドレイアウトにしたい要素を、divタグなどで囲う。
• そのタグにclass属性をつける。
• displayプロパティで値をgridにする。

たとえば今回は、containerクラスを付与したとしましょう。
そのcontainerクラスに以下のような記述をします。

.container {
  display: grid; /*gridレイアウトを使うと宣言*/
  grid-template-columns: 100px 100px;/*列2行*/
  grid-template-rows: 100px 100px 100px;/*行3行*/

grid-template-columnsプロパティとgrid-template-rowsプロパティで定義されたスペースのことを、グリッドトラックといいます。

可変長にできる単位：フラクション

また、フラクション(fr)という単位を使うと、フレックスボックスのように可変長の値を指定できます。

grid-template-columns: 100px 100px;/*列2行*/
grid-template-rows: 100px 1fr 100px;/*行3行*/

フラクションは、たとえば次のように使用することができます。

1:2で割り当てたい場合

grid-template-columns: 100px 100px;/*列2行*/
grid-template-rows: 1fr 2fr 100px;/*行3行*/

隙間を作れるgapプロパティ

グリッドレイアウトに隙間を作りたいとき、gapプロパティを使います。

gap: 10px;

列と行の余白がそれぞれ違う場合、次のように書きます。

gap: 20px 10px;

最初の値に行の間にいれる余白（上下の間に入る余白）、次の値に列の間にいれる余白（左右の間に入る余白）の順に書きます。

グリッドを簡単に増やすrepeat

次の記述で100pxを5列つくることができます。

grid-template-columns: 5, 100px; 

grid-templateの値でrepeatを使うと、たくさんのグリッドを簡単に増やすことができます。

幅いっぱいまでという指定をしたい場合、値をrepeatのauto-fillとします。

grid-template-columns: repeat(auto-fill, 100px); 

こうすることで入る分だけ列が作れるようになります。

auto-fillの余白を受ける方法

値にauto-fillを使うと、左側に次が入るまで余白ができます。

grid-template-columns: auto-fill, 100px;

minmax

minmaxでグリッドの最小値と最大値を指定することができます。
たとえば、次のように記述します。

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 

minmax(100px, 1fr)は、minを100px、maxを1frにしてと指定しています。そのため、100pxで余白ができる場合、それぞれの列を伸ばして(フラクション）して余白を埋めてくれるような設定になります。
そして100pxがちょうどのときは、それぞれ100pxになる。

auto-fit

auto-fitは、配置する要素がなくなった場合でも余白を入れたくない場合に使います。

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

画面幅次第で行を自動で増減させたい場合

画面幅次第で行の数を自動調整したい場合、次のように記述すると、要素がある分だけ行が100pxずつ増やすことができます。

grid-auto-rows: 100px;

グリッドラインを使いこなす

グリッドトラックを定義したことで、縦と横に線ができます。それをグリッドライン（グリッド線）といいます。
グリッドラインを指定することで、
配置したい場所に要素を配置することができます。

グリッドラインで1つの要素を自由に配置する

グリッドラインに関するプロパティを操作することで、指定した要素をグリッドセル（グリッド線で区切られた最小単位のセル）に自由に配置することができます。
横の線は、grid-row、縦の線は、grid-columnで指定します。

上から、次のように指定します。

  grid-row: 1;
  grid-row: 2;
  grid-row: 3;

下から指定することもでき、次のように記述します。

  grid-row: -1;
  grid-row: -2;
  grid-row: -3;

grid-columnも同様も同様の仕組みで指定することができます。

たとえば、上のような場所に配置したいなら、次のように指定します。

grid-row: 2;
    grid-column: 2;

また、次のように範囲を指定することもできます。

複数のグリッドを指定して配置する

複数のグリッドエリアを指定するには、次のような方法があります。

• grid-column: 始まりのラインNo. / 終わりのラインNo.;
• grid-column: 始まりのラインNo. / span エリア数;

始まり/終わりのラインNo.で指定する場合

上の場合なら、次のように指定することでグリッドエリアを2つ分指定できます。

grid-row: 2;
grid-column: 2 / 4;

始まりのラインNo. / span エリア数で指定する場合

なお、終わりのカラムの数字がわからない場合などに便利な方法が、spanで指定する方法です。
span 2とすれば同じ2マス分という意味で指定することができます。

また、下のように名前をつけて指定する方法もあります。

グリッドラインに名前をつける

グリッドラインは名前をつけて指定することもできます。
下のように指定すれば、始まりの名前 / 終わりの名前で指定することができます。

.box {
  grid-row: 2;
  grid-colums: iamge1-start / iamge1-end;
}

また、名前をつける場合、「-start」、「-end」と指定していれば、*を書くだけで指定できるようになります。

  .box {
    grid-row: 2;
    grid-colums: iamge1;
  }

名前の付け方は、次の場所に書くことで設定できます。

grid-template-colums: 100px [image1-start] 100px 100px [image1-end];

grid-auto-flowプロパティで並べ方を制御する

grid-auto-flowは並べ方を制御することができるプロパティです。
初期値はrowで、左から右に並びます。

値をcolumnにすると上から下に並ぶように指定できます。

grid-auto-flow：column;

grid-auto-columnsプロパティではみ出たものを制御する

grid-auto-columnsプロパティを使うと、gridからはみ出たものを制御できます。

grid-auto-columns: 100px;

上のように指定すれば、はみ出た要素が100pxの幅になります。

grid-auto-flow:denseで空白を埋める

grid-auto-flow：column dense;

grid-auto-flowプロパティでdenseという値を指定すると、要素の幅や高さが合わずに空白になった場所を埋めるように配置してくれます。

グリッドエリアを直感的に指定する方法

上で紹介した方法でも指定できるのですが、なかなか手間がかかったり覚えるには少し複雑と感じる場合もあります。

そんなときはgrid-template-areasプロパティを使うと、直感的に指定できるようになります。

たとえば、背景色でエリアを指定するとしましょう。

• redのr
• yellowのy
• blueのb

わかりやすいキーワードをつけて、マス目ごとに指定します。

そして、grid-areaプロパティでキーワード(たとえばr)を指定することでエリアを割り当てることができます。

  gird-template-areas: 
  "r r r r b"
  "r r r r b"
  "b b y y b"
  "b b . r r";
  
  box1 {
    grid-area: r;
  }
  box2 {
    grid-area: y;
  }
  box3 {
    grid-area: b;
  }

grid-template-areasプロパティを使うとき、いつくか注意点があるので把握しておきましょう。

• 必ずエリアは四角形になるように指定する
• 配置したくない箇所には「.(ピリオド)」をいれる

飛び地になっていたりするとグリッドのすべてが壊れます。
四角形でなくてもグリッドのすべてが壊れるので注意しましょう。

要素を揃えるプロパティ

グリッドエリアで合わせてよく使う要素を揃えるプロパティを把握しておきましょう。

• justify-content
• align-content
• justify-items
• align-items
• justify-self
• align-self

横(列)方向に配置をコントロールできるjustify-content

justify-contentは横(列)方向にどう揃えるかを決められるプロパティです。

• justify-contentがstartなら、左揃え
• justify-contentがendなら、右揃え
• justify-contentがcenterなら、中央揃え
• justify-contentがspace-betweenなら、列方向で間に余白を均等に配置

縦(行)方向に配置をコントロールできるalign-content

align-contentは縦(行)方向にどう揃えるかを決められるプロパティです。

• align-contentがstartなら、上揃え
• align-contentがendなら、下揃え
• align-contentがcenterなら、中央揃え
• align-contentがspace-betweenなら、縦（行）方向の間に余白を均等に配置

グリッド内で横(列)方向に配置をコントロールできるjustify-items

• justify-items
• align-items

この2つは、グリッド内で要素をどう揃えるかを決めるプロパティです。

justify-itemsはグリッド内で要素を横(列)方向にどう配置するかを決めます。

• justify-itemsがstartなら、グリッド内で左揃え
• justify-itemsがendなら、グリッド内で右揃え
• justify-itemsがcenterなら、グリッド内で中央揃え

グリッド内で縦(行)方向に配置をコントロールできるalign-items

• align-itemsがstartなら、グリッド内で上揃え
• align-itemsがendなら、グリッド内で下揃え
• align-itemsがcenterなら、グリッド内で中央揃え

個々の要素を横(列)方向に配置をコントロールできるjustify-self

• justify-self
• align-self

この2つは、個々の要素の配置を決めるプロパティです。

justify-selfはグリッド内の個々の要素を横（列）方向にどう配置するかを決めます。

• justify-selfがstartなら、指定した個々の要素を左揃え
• justify-selfがendなら、指定した個々の要素を右揃え
• justify-selfがcenterなら、指定した個々の要素を中央揃え

個々の要素を縦(行)方向に配置をコントロールできるalign-self

align-selfはグリッド内の個々の要素を縦（行）方向にどう配置するかを決めます。

• align-selfがstartなら、指定した個々の要素を上揃え
• align-selfがendなら、指定した個々の要素を下揃え
• align-selfがcenterなら、指定した個々の要素を中央揃え