CSSグリッドとは
ウェブページをエリアに分割したり、
エリアの大きさを決めたり、
エリアの名前を決めて役割を割り当てたり、
表示するデバイスやウィンドウの大きさによって見え方を変えたりできる。
例えば、「ここはヘッダー」、「ここはメインコンテンツ」、
「ここは広告」、「ここはフッター」、
「広告エリアの幅は100ピクセル」、「フッターの高さは50px」 などなど。
このように、ウェブページのレイアウトを組む時に使われる機能をCSSグリッドという。
CSSグリッドの適用
displayプロパティで、gridを設定する。
display: grid;
/*CSSグリッドの適用*/
このようにして、CSSグリッドのあらゆる機能が使えるようになる。
“親要素”を「コンテナ」、それに従属する“子要素”を「アイテム」という。
横方向に分割するグリッドを作る「grid-template-columns」プロパティ
grid-template-columns: (幅の長さ) (幅の長さ) (幅の長さ) ... (幅の長さ);
/*カラムを作る*/
「（幅の長さ）」の数だけカラムが作られる。
縦方向に分割するグリッドを作る「grid-template-rows」プロパティ
grid-template-rows: (高さの値) (高さの値) (高さの値) … (高さの値) ;
/*ローを作る*/
グリッドのサイズを指定する
grid-template-columns: auto 50px 10% 2fr 1fr;
/*
auto: そのコンテンツの長さと同じ
50px: 50px
10%: コンテナの10%
2fr 1fr: 2/3分割 1/3分割
*/
カラム間の隙間を指定する「grid-column-gap: 」プロパティ
grid-column-gap: 10px;
/*カラムどうしの隙間のサイズ*/
ロー間の隙間を指定する「grid-row-gap: 」プロパティ
grid-row-gap: 10px;
/*ローどうしの隙間のサイズ*/
グリッド内の隙間を指定する「grid-gap: 」プロパティ
grid-gap: 10px 5px;
/*グリッド内の隙間のサイズ 前：ロー間 後：カラム間*/
grid-gap: 10px;
/*グリッド内の隙間のサイズ*/
グリッドのアイテムそのものを操作する「grid-column: 」プロパティ
rowで置き換え可能
grid-column: 1 / 3;
/*分子： 開始するライン番号； 分母：終了するライン番号*/
アイテムを水平配置する「justify-self: 」プロパティ
垂直配置の場合、「align-self: 」を使う。
justify-self: center; /*中央寄せ*/
justify-self: start; /*左揃え*/
justify-self: end; /*右揃え*/
justify-self: strech; /*ロー全体に拡張*/
/*垂直配置の場合*/
align-self: end
アイテムの水平配置を揃える「justify-items: 」プロパティ
垂直配置は、「align-items: 」プロパティ。
justify-items: center;
align-items: end;
特定のグリッドを指定して名前を定義する「grid-template-areas: 」プロパティ
行は「“”」、列は「“”」の並び、空のグリッドは「.」で表現する。
grid-template-areas:
"header header header"
". content content"
"footer footer footer";
/*.は空のグリッド*/
アイテムの名前を定義する「grid-area: 」プロパティ
「grid-template-areas」プロパティで指定した名前のグリッド（例えば「footer」）に、アイテムを指定できる
grid-area: footer;
「grid-area: 」プロパティを使って領域の範囲を指定する
grid-area: 3/1/4/4;
/*開始する水平線の番号/開始する垂直線の番号/終了する水平線の番号/終了する垂直線の番号*/
値の繰り返し「repeat」
repeat((繰り返す回数), (パターン))
grid-template-columns: repeat(2, 1fr 50px) 20px;
/*以下と同じ*/
grid-template-columns: 1fr 50px 1fr 50px 20px;
カラム幅の最大値・最小値を指定する「minmax」
grid-template-columns: repeat(3, minmax(90px, 1fr));
/*最小値が90pxで、最大値が1/3分割*/
/*1つのエリアの幅が90pxを超えるとそれぞれのエリアの幅が拡張する*/
/*→ウインドウを変形させて確認*/
「auto-fill」「auto-fit」を使った柔軟なレイアウト
repeat(auto-fill, minmax(60px, 1fr));
/*幅が61px以上→2分割*/
/*幅が121px以上→3分割 ・ ・ ・ */
/*空のアイテムが行に登場する*/
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
/*空のアイテムを作らない*/
参考：
↧