フリーランスの忘備録

Dark Mode

searchKeywords

sellBlog Taglist

boltおすすめ記事

display: gird; を利用したレイアウト例

display: gird; を利用したレイアウト例

前回グリッドレイアウトの基本的な使い方で、display: grid;の基礎的な使い方を紹介しました。

今回は実際にどのような場合にグリッドレイアウトが使えるのかを、紹介していきたいと思います。

目次

  1. 要素をタイル状に同じ高さで並べる
  2. よくあるサイトの構成をグリッドレイアウトを使って組んでみる
  3. テキストと画像をずらして重ねる

要素をタイル状に同じ高さで並べる

要素をタイル状で並べる際に、グリッドレイアウトでキレイに並べることができます。
今回は以下のような条件で作成してみます。

  1. 横並びの要素の高さは同じにする
  2. 要素同士の間は10px
  3. 要素の幅は最大100pxで、windowサイズによって横並びの要素数は可変にする

See the Pen Grid layput template1 by blanks (@blanks-site) on CodePen.

「1.横並びの要素の高さは同じにする」は、グリッドコンテナに「align-items:strech;」を指定すればよいですが、初期値が「strech」なので省略しています。

「2.要素同士の間は10px」は、グリッドコンテナに「grid-gap」を指定することで、グリッドアイテムの間隔を指定できます。

「3.要素の幅は最大100pxで、windowサイズによって横並びの要素数は可変にする」は、グリッドコンテナに「grid-template-columns: repeat(auto-fill,minmax(auto,100px));」を指定して、実現しています。
要素の最大幅を300pxにする場合は「repeat(auto-fill,minmax(auto,300px)」にすれば問題ないです。

また要素が中央寄りになるようにグリッドコンテナに「justify-content:center;」を指定しています。

よくあるサイトの構成をグリッドレイアウトを使って組んでみる

よくある「header」があって、「heroイメージ」があって、「nav」があって、、、といった感じのレイアウトをグリッドで組んでみます。

グリッドレイアウトで組むとhtmlがスッキリするので驚きです。
htmlは以下のコードで組んでます。

html

<div class="grid-container">
  <div class="header-item">header</div>
  <div class="heroImage-item">heroImage</div>
  <div class="nav-item">nav area</div>
  <div class="side-item">side area</div>
  <div class="bread-item">bread area</div>
  <div class="main-item">main area</div>
  <div class="foot-item">foot area</div>
  <div class="copyright-item">copyright</div>
</div>

組んだ結果は以下のようになります。

See the Pen Grid layput template2 by blanks (@blanks-site) on CodePen.

floatを使って組んでたときには考えられないですね。驚きです。

headerやnav、footer、コンテンツエリアの最大幅を500pxとして組んでいます。
heroイメージ、copyrightはwindow幅いっぱいに広がるようにしています。
どのように組んでいるか1つずつ説明しようと思います。

まず、グリッドアイテムの配置については以下のcssプロパティで指定しています。
grid-template-areasの説明に関しては「エリアを指定してグリッドアイテムを配置」をご確認ください。
グリッドエリア名の指定で「.（ピリオド）」がありますが、これはエリア名を指定しないという意味です。
最大幅を500pxにしている箇所の両端には「.」を指定していることが分かると思います。

.grid-container{
  grid-template-areas:
    ". header header ."
    "heroImage heroImage heroImage heroImage"
    ". nav nav ."
    ". side bread ."
    ". side main ."
    ". footer footer ."
    "copyright copyright copyright copyright";
}

次にコンテンツエリアの最大幅を500pxといった指定は、以下のcssプロパティで指定しています。
上記の「grid-template-areas」の指定で分かる通り、このグリッドコンテナは4列で組んでいます。windowサイズが500pxより大きい時は、間の2列を「100px 400px」で固定して、
windowサイズが500px以下のときは、両端の列を「0」に指定して、間の2列を「1fr 4fr」で指定しています。

.grid-container{
  grid-template-columns: auto 100px 400px auto;
}
@media screen and (max-width:500px){
  .grid-container{
    grid-template-columns: 0 1fr 4fr 0;
  }
}

テキストと画像をずらして重ねる

ここ数年よく見かけるのが、テキストと画像をずらして重ねているレイアウトです。
背景画像を使用したり、ネガティブマージンを使用したりしてレイアウトしていると思いますが、グリッドレイアウトで簡単にレイアウトできます。

See the Pen Grid layput template3 by blanks (@blanks-site) on CodePen.

これは「grid-row」「grid-column」を指定することで組んでいます。プロパティの説明に関しては「ラインを指定してグリッドアイテムを配置」をご確認ください。

これは3行×3列のグリッドを作成して、それぞれの行は等しい高さに、それぞれの列は等しい幅になるようにしており、2行目2列目のグリッドでテキストアイテムとイメージアイテムが重なるようにしています。

「grid-template-rows: 1fr 1fr 1fr;」と
「grid-template-columns: 1fr 1fr 1fr;」の指定を変更すれば、重なる面積を自由に変更できます。

背景画像で指定したり、ネガティブマージンを使用したりするよりはだいぶ楽にレイアウトできるかなと個人的には思います。

最初にグリッドレイアウトを知ったときには、floatやflexでもできるじゃん！と思っていましたが、グリッドレイアウトにはグリッドレイアウトの良さがやっぱりありますね。
今後はグリッドレイアウトも使用していきたいなと思いました。

arrow_circle_up