比較的新しいスタイリングのグリッドレイアウト。
使えるようになればサイトデザインの幅が広がりますね。
技術仕様を一読しただけだと、最初は「むむ、、」となりましたが、読み込んで2周目に入れば仕組みは簡単だという事に気がつきました。
単にプロパティの多さに一瞬怯んでしまっただけでした。
コーディングの骨組みは単純なので、備忘も兼ねて、振り返りサイトとしてまとめておきます。
[rtoc_mokuji title=”Contents” title_display=”left” heading=”h4″ list_h2_type=”round” list_h3_type=”round” display=”close” frame_design=”frame4″ animation=”slide”]
CSSグリッドレイアウトを総まとめ
親要素の配置
グリッドレイアウトを進めるには、配置したい要素に親要素が必要になります。
HTMLに<div>要素などで親要素を作って、classやidの属性付けをしておきましょう。
{display: grid;}の宣言
親要素に対して
display: grid;
と宣言してあげれば準備完了です。
プロパティ一覧
| クラス | プロパティ | 値（例） | 内容 |
| .container | display | : grid; | 親要素に対してグリッドレイアウト宣言 |
| .container | grid-template-columns | : 100px 100px 100px; | 列方向に100pxで3列のグリッドを設定 |
| : 100px 1fr 100px; | 2列目の1frが余白に対して可変 | ||
| : 100px 2fr 1fr; | 2frと1frが余白に対して2:1の割合で可変 | ||
| : repeat(4, 100px); | 列方向に100pxを4列設定 | ||
| : repeat(auto-fill, 100px); | 親要素の幅に入る限り100pxを設定。列数は可変。余白ができる。 | ||
| : repeat(auto-fill, minmax(100px, 1fr)); | 親要素の幅に入る限り最小は100px、最大は余白分を各列に加えて設定。列要素がなくなると余白が生じる。 | ||
| : repeat(auto-fit, minmax(100px, 1fr)); | 親要素の幅に入る限り最小は100px、最大は余白分を各列に加えて設定。列要素がなくなっても余白が生じない。 | ||
| クラス | プロパティ | 値（例） | 内容 |
| .container | grid-template-rows | : 100px 100px 100px; | 行方向にグリッドの格子を設定 3行にしたい場合、3つの値を指定 |
| .container | grid-auto-rows | : 100px; | 行方向の行要素の行数を指定しない設定。行方向の行要素は全て100pxになる。 |
| .container | gap | : 10px; | グリッドの縦横間に10pxの余白設定 |
| : 10px 20px; | グリッドの縦方向に10px、横方向に20pxの余白設定 | ||
| .box | grid-row: 2; grid-column: 2; |
「グリッドライン」要素を行方向に2、列方向に2移動させる設定 | |
| .container | grid-row: 2; | 要素を行方向に2、列方向に2移動させ、かつ列方向に2〜4に伸ばす設定 | |
| .box | grid-column: 2 / 4; | ||
| .container | grid-row: 2; | 要素を行方向に2、列方向に2移動させ、かつ列方向に2セル分伸ばす設定 | |
| .box | grid-column: 2 / span 2; | ||
| クラス | プロパティ | 値（例） | 内容 |
| .container | grid-template-columns: 100px 100px [target-start] 100px [target-end]; | 要素を行方向の[target-start]から[target-start]に、列方向に2移動させる設定 | |
| .box | grid-row: 2; | ||
| grid-column: target-start / target-end; | |||
| .container | grid-template-columns: 100px 100px [target-start] 100px [target-end]; | 同上（値をtargetだけで指定可能） | |
| .box | grid-row: 2; | ||
| grid-column: target | |||
| .container | grid-auto-flow | : row; | 要素を左上から列方向に並べる設定（初期値） |
| grid-auto-flow | : column; | 要素を左上から行方向に並べる設定 | |
| grid-auto-flow | : column dense; | 要素を左上から行方向に並べ、大きさの異なる要素の場合、隙間を埋める設定 | |
| クラス | プロパティ | 値（例） | 内容 |
| .box | grid-column | : span 2; | 要素を列方向に2マス分拡大 |
| .box | grid-row | : span 2; | 要素を行方向に2マス分拡大 |
| .container | grid-auto-columns | : 100px; | グリッド外の列の幅を100pxに指定（右端の要素を横方向いっぱいに広がらないように設定） |
| .container | grid-template-columns: repeat(5, 100px); grid-template-rows: repeat(4, 100px);grid-template-areas: “r r r y y” “r r r y y” “c c g y y” “c c b y y”; |
値を任意に指定して（例；r.y.g.c.b.）レイアウトする設定 | |
| .box1 | grid-area: r; | ||
| .box2 | grid-area: y; | ||
| .box3 | grid-area: g; | ||
| .box4 | grid-area: c; | ||
| .box5 | grid-area: b; | ||
| クラス | プロパティ | 値（例） | 内容 |
| .container | justify-content | : start; | グリッド全体を列方向に左揃え |
| : end; | グリッド全体を列方向に右揃え | ||
| : center; | グリッド全体を列方向に中央揃え | ||
| : space-between; | グリッド全体を列方向に均等揃え | ||
| align-content | : start; | グリッド全体を行方向に上揃え | |
| : end; | グリッド全体を行方向に下揃え | ||
| : center; | グリッド全体を行方向に中央揃え | ||
| : space-between; | グリッド全体を行方向に均等揃え | ||
| justify-items | : start; | グリッド内で列方向に左揃え | |
| : end; | グリッド内で列方向に右揃え | ||
| : center; | グリッド内で列方向に中央揃え | ||
| align-items | : start; | グリッド内で行方向に上揃え | |
| : end; | グリッド内で行方向に下揃え | ||
| : center; | グリッド内で行方向に中央揃え | ||
| justify-self | : start; | 個々の要素をグリッド内で列方向に左揃え | |
| : end; | 個々の要素をグリッド内で列方向に右揃え | ||
| : center; | 個々の要素をグリッド内で列方向に中央揃え | ||
| align-self | : start; | 個々の要素をグリッド内で行方向に上揃え | |
| : end; | 個々の要素をグリッド内で行方向に下揃え | ||
| : center; | 個々の要素をグリッド内で行方向に中央揃え | ||
| クラス | プロパティ | 値（例） | 内容 |
まとめ
グリッドレイアウトの各ブラウザの対応状況はcaniuse.comだと » こんな感じです。
以上、ちょっと一覧に挙げたプロパティの数が多くなりましたが、「» mdn」ではまだ和訳が追いついていないみたいなので、自力で情報をかき集めた結果です。
全てを厳密に覚える必要はないと思います。
慣れてくるとこの表を振り返ればすぐに適切な選択ができると思います。
皆さんのお役に立てば幸いです！
自宅で学べるオンラインスタイルの「TECH CAMP」で無料カウンセリングやってます！
