CSSグリッドレイアウトでフォトギャラリーを作る

CSSグリッドレイアウトについて勉強したことをまとめます。

CSSグリッドレイアウトとは？

表のようなマス目に自由に要素を配置できるのがCSSグリッドレイアウト。
マス目の大きさも自由に設定することが可能。

CSS Grid Layout を極める！（基礎編） - Qiita

0. はじめに CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、...

qiita.com

CSS Gridの使い方を初心者向けに丁寧に解説！爆速でレイアウトを完結させよう | ZeroPlus Media

CSS Gridを使いこなせば、横並びや格子状のレイアウトを効率的に組めます。しかし、他のプロパティとは値の指定方法や概念が異なるため、なかなか理解しづらい部分があるでしょう。この記事では、Gridでよく使うプロパティの指定方法に絞り解説し...

zero-plus.io

frexboxは1次元（横か縦か、どちらかに並べることが可能）なのに比べ、
グリッドレイアウトは2次元（縦にも横にも配置できる）なんですって。

てことはですよ、

ポートフォリオも自分で作れるようになるってことでは…！？

WordPressの固定ページで独立させて、作ってしまえるということでは！？

私の今のポートフォリオ、半年以降は有料になってしまうので、それまでに素敵なポートフォリオを作れるようになりたいな！！

そんなわけでここにCSSグリッドの設定方法をメモ。

① （htmlファイルで写真をリストで並べ、class名を指定しておき、）class名にdisplay : grid ; を指定。
②　縦のグリッドトラックを指定（縦に何分割するか決める）
③　横のグリッドトラックを指定（横に何分割するか決める）

.photoGarelly {
 display: grid;　←①
 grid-template-rows: 40vw 30vw 30vw 40vw 40vw;　←②（縦に5分割）
 grid-template-colums: 50% 50%;　←③（横に2分割）
}
――これだけで基本がしっかり身に付くHTML/CSS＆webデザイン　p.252

vwはviewportの横幅（デバイスによって違う）に合わせてセルの高さを比率で決めるためだそうです。
縦の単位を横幅用の単位で指定するの、初めは？？？と思いましたが、写真の縦横比を保ったままレスポンシブに対応させるためにこうするんですって。

④写真一つ一つの配置を指定していく。

.item01 {
 grid-row-start: 1;
 grid-row-end: 2;
 grid-column-start: 1;
 grid-column-end: 3;
}
――これだけで基本がしっかり身に付くHTML/CSS＆webデザイン　p.253

item01というclass属性の写真を、さっき分割した線の、「縦1の線から2の線まで」「横1の線から3の線まで」またがるように配置する、という意味だそうです。

こりゃパズルですね。こんがらがっちゃいそうだけど、これを駆使すれば、ポートフォリオ、作れそうですよね…！

12月はポートフォリオサイトを作ってみる月にしようかなあ！11月中にこの本終わらせるぞー！