0%

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

Posted:2018.11.21

CSSのGridレイアウトをマスターするためのまとめ(応用編:グリッド・変則レイアウト)

前回記事「CSSのGridレイアウトをマスターするためのまとめ(基本編:マルチカラムレイアウト) 」では一般的なウェブサイトのレイアウトであるマルチカラムのレイアウトを実際に作成しましたが、今回はそれ以外にも様々なレイアウトをGirdを使って実装していきたいと思います。

 

最近ではいろんなレイアウトのバリエーションも見られるようになってきています。そんな場面での柔軟性もGridレイアウトの魅力でもありますので、ぜひ使いこなしたいですね。

 

Gridレイアウトで作るマス目状グリッドレイアウトのサンプル

マス目状に広がるグリッドレイアウトを実装するのは、その名の通りGridレイアウトは最も適しているのではないでしょうか。他の実装方法に比べて短いコードで表現できてしまいます。アプリなどのランチャーアイコンのような配置にもピッタリですね。

【HTML】※一部省略

<div class="grid-container">
  <div class="gird-item">セル1
  </div>
  <div class="gird-item">セル2
  </div>
  <div class="gird-item">セル3
  </div>
  <div class="gird-item">セル4
  </div>
  <div class="gird-item">セル5
  </div>
    ……
</div>

 

【CSS】

.grid-container {
  grid-template-rows: repeat(5, 20%);
  -ms-grid-rows: repeat(5, 20%);
  grid-template-columns: repeat(5, 20%);
  -ms-grid-colums: repeat(5, 20%);
}

 

なんと、たったこれだけでマス目状のグリッドレイアウトが作成できてしまいます。同じ値を複数回繰り返す時には、repeatを使ってまとめることが出来ます。第一引数に繰り返す回数を、第二引数に繰り返す要素のサイズをそれぞれカンマ区切りで指定します。数が多い時などに有効ですね。

 

マス目状のグリッドレイアウトのサンプルはこちらに用意していますので参考に。

 

Gridレイアウトで作る変則レイアウトのサンプル

これまでのレイアウトサンプルは規則性のあるものでしたが、Girdレイアウトでは各グリッドアイテムの大きさや並びがランダムになっているような変則的なレイアウトも実装することが出来ます。このような不規則で複雑なレイアウトも列行で一括指定しながらも、敷き詰めるように配置できるのはGirdレイアウトの強みではないでしょうか。

【HTML】※一部省略

<div class="grid-container">
  <div class="gird-item">セル1
  </div>
  <div class="gird-item">セル2
  </div>
  <div class="gird-item">セル3
  </div>
  <div class="gird-item">セル4
  </div>
  <div class="gird-item">セル5
  </div>
  <div class="gird-item">セル6
  </div>
  <div class="gird-item">セル7
  </div>
  <div class="gird-item">セル8
  </div>
  <div class="gird-item">セル9
  </div>
</div>

 

【CSS】

.grid-container {
  grid-template-rows: repeat(5, 20%);
  -ms-grid-rows: repeat(5, 20%);
  grid-template-columns: repeat(4, 25%);
  -ms-grid-colums: repeat(4, 25%);
  grid-auto-flow: dense;
  -ms-grid-auto-flow: dense;
}
.grid-item:first-child {
  grid-row: span 2; 
  -ms-grid-row: span 2; 
  grid-column: span 2;
  -ms-grid-column: span 2;
}
.grid-item:nth-child(2) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(3) {
  grid-row: span 4; 
  -ms-grid-row: span 4; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(4) {
  grid-row: span 2; 
  -ms-grid-row: span 2; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(5) {
  grid-row: span 2; 
  -ms-grid-row: span 2; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(6) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(7) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}
.grid-item:nth-child(8) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 4;
  -ms-grid-column: span 4;
}
.grid-item:nth-child(9) {
  grid-row: span 1; 
  -ms-grid-row: span 1; 
  grid-column: span 1;
  -ms-grid-column: span 1;
}

 

親要素であるグリッドコンテナを見ると、ここでもグリッドアイテムのサイズ指定にrepeatを使っていますが、もう一点、grid-auto-flowというプロパティにdenseという値を設定しています。この値を設定することで、グリッドアイテム間の空いたスペースを埋めるよう自動的にグリッドアイテムが配置されるようになります。

 

レイアウトが不規則になる場合はグリッドアイテムの配置を考えたり、設定したりするのが大変です。そんな時にこのような設定をしていると自動的にグリッドアイテムが整列して並んでくれるのでかなり楽になります。

 

子要素であるグリッドアイテムのサイズと配置を決めていくのですが、ここではシンプルな記述方法として、値にspanを使った方法で記述しています。これは、グリッドアイテムをいくつ繋げて配置するかという指定になります。tableで言うところのcolspan、rowspanという属性に当たります。指定方法もわかりやすく、縦方向(行)を繋げたい場合にはgrid-rowに、横方向(列)を繋げたい場合はgrid-columnにそれぞれ、「span」と繋げるグリッドラインの数を指定します。

 

変則レイアウトのサンプルはこちらに用意していますので参考に。

 

いかがでしょうか、慣れるまではちょっと取っつきにくい印象があるGridレイアウトですが、他の手法では実装が難しいレイアウトでも、比較的簡単に出来たりするので便利ですね。必ずしも全てGridレイアウトで組んでいくのは一概にベストとは言えないかもしれませんが、Flexboxレイアウトなどと使い分けることで効率的なコーディングができるのではないでしょうか。

 

(参考にさせて頂いたサイト)
CSS Grid Layout を極める!(場面別編)

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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