0%

Programmingプログラミングナレッジ

Posted:2018.10.19

CSSのGridレイアウトをマスターするためのまとめ(各種プロパティ編)

最近よく見かけるようになったCSSのGridレイアウトですが、ブラウザ対応やとっつきにくいイメージもあり、導入へのハードルがあるのではないでしょうか。ただ、使いこなすととても便利なものなので、ぜひマスターしておきたい技術ですよね。そこで今回から複数記事にわたり、CSSのGirdレイアウトについて色々とまとめていきたいと思います。

 

(こちらの記事も合わせてどうぞ)

CSSのFlexboxレイアウトをマスターするためのまとめ(Flexコンテナー編)
CSSのFlexboxレイアウトをマスターするためのまとめ(Flexアイテム編)

 

Girdを構成する要素について

過去記事でFlexboxレイアウトについても紹介していましたが、Gridレイアウトも同じでGridコンテナという親要素とGirdアイテムという子要素で構成されています。HTMLで記述するとこのような形です。

<div class="gird-container">
  <div class="gird-item">
  </div>
  <div class="gird-item">
  </div>
  <div class="gird-item">
  </div>
</div>

 

そして、親要素のGridコンテナ要素に対してCSSで指定すると、それらの要素にGridレイアウトが適用されます。Flexboxと同じくインライン要素として扱うことも可能です。またGirdレイアウトはIE11以下に対応していないため、ベンダープレフィックスの記述が必要になります。

.gird-container {
  display: grid;
  display: -ms-grid;
}

// Gridコンテナをインライン要素としたい場合
.gird-container {
  display: inline-grid;
  display: -ms-inline-grid;
}

 

このような形でGirdレイアウトを構築していきます。そして以下で紹介する各種プロパティを使って配置を調整していきます。

 

親要素の「Girdコンテナ」の振る舞いを指定する

ここでは親要素であるGirdコンテナに対して指定するプロパティをあげています。

 

grid-template-rows 各グリッドの行の高さを指定する、上から順に各行の数値を半角スペースで区切って指定
grid-template-columns 各グリッドの列の幅を指定する、左から順に各列の数値を半角スペースで区切って指定
grid-template-areas グリッドコンテナ内に含まれるアグリッドイテムのエリアにまとめて名前を設定する。値は行ごとにダブルクオーテーションで囲み、その中で列ごとに半角スペースで区切る。
grid-auto-rows グリッドコンテナからはみ出したグリッドアイテムに対してなど、グリッドの行で高さが設定されていない場合の時に適用させる各行の高さを指定する。
grid-auto-columns グリッドコンテナからはみ出したグリッドアイテムに対してなど、グリッドの列で幅が設定されていない場合の時に適用させる各列の幅を指定する。
grid-auto-flow グリッドの自動整列のルールを指定する。行の追加、列の追加、隙間を埋めるように配置といった振る舞いを指定できる。
grid-row-gap グリッドコンテナに含まれるグリッドアイテム間のセルに対して行間の余白を設定する
grid-column-gap グリッドコンテナに含まれるグリッドアイテム間のセルに対して列間の余白を設定する
justify-content グリッドコンテナに含まれるグリッドアイテムの水平方向の配置を指定する
align-content グリッドコンテナに含まれるグリッドアイテムの垂直方向の配置を指定する
justify-items グリッドコンテナに含まれる全てのグリッドアイテムに対して、グリッドのエリア内における水平方向の配置を一括指定する。
align-items グリッドコンテナに含まれる全てのグリッドアイテムに対して、グリッドのエリア内における垂直方向の配置を一括指定する。

 

 

子要素の「Girdアイテム」の振る舞いを指定する

そして子要素であるGirdアイテムに対して指定するプロパティです。

 

grid-row グリッドアイテムのエリアに対して、行の開始位置と終了位置を指定する。
grid-column グリッドアイテムのエリアに対して、列の開始位置と終了位置を指定する。
grid-area 個別のグリッドアイテムに直接名前を設定する。値にはそのまま指定する名前をつける
justify-self 個別のグリッドアイテムに対して、グリッドのエリア内における水平方向の配置を単独で指定する。
align-self 個別のグリッドアイテムに対して、グリッドのエリア内における垂直方向の配置を単独で指定する。
order グリッドアイテムに対して直接並び順の指定をする

 

これらのプロパティを組み合わせることでいろんな配置をGirdレイアウトで実現していきます。詳しくは後日別記事にて紹介していきたいと思います。

 

ショートハンドでの記述

Girdレイアウトで使うプロパティにはショートハンドで記述できるものもあります。ショートハンドで記述することでCSS自体もスッキリさせることができます。慣れればできるだけショートハンドで記述していくようにしましょう。

 

【grid-template】

grid-template-rowsとgrid-template-columnsの値を続けて指定

.gird-container {
  // grid-template-rows / grid-template-columns
  grid-template: 10px 50px 50px / 100px 80px 120px;
}

 

【grid-gap】

grid-row-gapとgrid-column-gapの値を続けて指定

.gird-container {
  // grid-row-gap / grid-column-gap
  grid-gap: 40px 60px;
}

 

 

Internet Explorer 11への対応

とても便利なGirdレイアウトですが、残念ながらIE11ではベンダープレフィックスを付与したり、プロパティを調整する必要があります。またIE10以下では対応していません。それ以外でも一部ブラウザではサポートしていないものもいくつかあります。

 

とはいえ、まだIE11がある程度のシェアがあるということもあり、別途対応が必要になってくるのではないでしょうか。そこで下記にIE11への対応方法をまとめています。

 

1. ベンダープレフィックスやプロパティ名の変更が必要

一部プロパティは「-ms-」のベンダープレフィックスをつけたり、プロパティ自体も変更する必要があります。

.gird-container {
  display: gird;
  display: -ms-gird;  // IE11対応
  grid-template-colums: ……
  -ms-grid-colums: ……  // IE11対応
  grid-template-rows: ……
  -ms-grid-rows: ……  // IE11対応
}
.gird-item {
  align-self: ……
  -ms-grid-column-align: ……  // IE11対応
  justify-self: ……
  -ms-grid-row-align: ……  // IE11対応
}

 

2. Girdアイテムの配置についての記述方法が異なる

grid-rowやとgrid-columnでGridアイテムの行列の開始位置を基準に指定した場合、下記の通り記述方法が少し変わります。開始位置を指定するプロパティ(grid-row-start、grid-column-start)をそれぞれ「-ms-grid-row-start」「-ms-grid-column-start」に変更し、終了位置までの幅及び高さをを「-ms-grid-row-span」「-ms-grid-column-span」で指定する必要があります。

.gird-item {
  grid-column: 1 / 3;
  grid-row: 1 / 4;
  -ms-grid-column-start: 1;  // IE11対応
  -ms-grid-column-span: 2;  // IE11対応
  -ms-grid-row-start: 1;  // IE11対応
  -ms-grid-row-span: 3;  // IE11対応
}

 

とても便利なGirdレイアウトですが、未対応ブラウザ対応は少し面倒になりますが、対象外とするのであれば導入のハードルもそこまで高くないのでは。今回の記事ではGridレイアウトのプロパティを中心にまとめていますが、次回はこれらを使って実際にレイアウトを組んでみたいと思います。

 

(参考にさせて頂いたサイト)
CSS3リファレンス
CSS GridをIE11、EDGEに対応させるために注意する点
CSS Grid Layout を極める!(基礎編)

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】