grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法

※本ページはプロモーションが含まれています

はじめに

レスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？

display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。

どちらを使うかは条件によって分かれます。

例えば…

＜条件1＞
スマホは1列、デスクトップは4列、要素は左詰めでOK

＜条件2＞
スマホは1列、デスクトップは4列、要素は1番目が左上、2番目が左下、3番目が右上、4番目が右下に

というような2種類の条件があるとして ＜条件1＞はdisplay:flexのほうが楽ですし＜条件2＞はdisplay:gridでないと難しいです。

＜条件2＞は一見難しそうですがgridのgrid-template-areas、 grid-areaプロパティを使うと簡単にクリアできます。

今回はこのgrid-template-areas、grid-areaの使用例を紹介します。

コード例

<ul class="grid-item-list">
  <li>1番目のアイテム</li>
  <li>2番目のアイテム</li>
  <li>3番目のアイテム</li>
  <li>4番目のアイテム</li>
</ul>

/* デスクトップ */
@media only screen and (min-width:768px) {
	.grid-item-list {
	  display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 150px 150px;
	  grid-template-areas:
      "1st 3rd"
      "2nd 4th";
	}
	.grid-item-list > li:nth-of-type(1) {
    grid-area: 1st;
	}
	.grid-item-list > li:nth-of-type(2) {
    grid-area: 2nd;
  }
	.grid-item-list > li:nth-of-type(3) {
    grid-area: 3rd;
	}
	.grid-item-list > li:nth-of-type(4) {
    grid-area: 4th;
	}
}

実際の表示

See the Pen grid-area-sample by watashi-xyz (@watashi-xyz) on CodePen.

注意点

grid-areaプロパティに1st、2nd、3rd、4thを指定していますがダブルクオテーションで括りたくなりますが括ると無効な値と判断され意図通りの表示になりません。

.OK {
  grid-area: 1st
}
.NG {
  grid-area: "1st";
}

最後に

display:grid;非対応のブラウザがほぼなくなったと言えるのでかなり自由度の高いレイアウトを短いコードで実現できるようになりました。

▼Can I use grid-area
https://caniuse.com/?search=grid-area

grid-areaプロパティがあるということを知っているだけでレイアウトの幅がだいぶ広がりますね。