CSS Grid Layout

グリッドレイアウト

このレイアウトをGrid Layoutで作ってみました。

HTMLはこんな感じです。

HTML

<div class="content">
  <h2>タイトル</h2>
  <p>テキストテキストテキストテキストテキスト</p>
  <img src="img/img.png" alt="">
  <button>ボタン</button>
</div>
<!-- スマホ表示時はボタンを一番下にしたい為、この書き方にしました。 -->

CSSはこちら

CSS

.content{
  width: 1200px;
  height: 900px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 3fr;
  grid-template-columns: 400px 1fr;
}

img{
  grid-row: 1 / 5;
  grid-column: 2 / 4;
}

説明しやすいようにwidthを1200px、heightを900pxで指定しました。

grid-template-rows: 1fr 1fr 1fr 1fr; 

こちらは行を4つ作っています。プロパティの中の値の数だけ行を作ります。

frは何分割するかを指定する単位で、値を"1fr 1fr 1fr 3fr"にしている為合計して6分割している事になります。 高さが900pxで、ここでは1frは1/6、3frは1/2という事なので　150px 150px 150px 450pxに行が区切られます。

grid-template-columns: 400px 1fr;

こちらは列を2列に分けて、400pxと1fr(800px)に分けています。

図で表すとこんなイメージ

CSS

img{
  grid-row: 1 / 5;
  grid-column: 2 / 4;
}

今回は画像だけ位置の指定をしています。
"grid-row"で何行から何行まで配置するか指定できます。"1 / 5"でRowのグリッド線(ピンク色の線)の1本目から5本目まで指定。
"grid-column"では何列から何列か指定。"2 / 4"でColumnのグリッド線(青色の線)の2本目から4本目まで指定。

こんな感じに配置されます。

先程のHTMLに当てはめるとこんな感じ

CSS

@media screen and (max-width : 768px) {
  .content{
    display: block;
  }
}

これで"display:grid;"が解除され

こんな感じでレスポンシブ対応ができました。