[css] CSS Grid layout

CSS Gridレイアウトを選択した理由

個人向けポートフォリオのホームページを作成し始めました.これまでWebプログラムのみを使用していたのに比べて、モバイル環境では
適切な構造に見えるように、グリッドレイアウトを採用することにしました.
マルチナイフ、ガイドバー、ソフトボックスレイアウトを使用するなど、さまざまな選択肢がありますが、その中には
CSSグリッドレイアウトモジュールを選択しました.
flexboxレイアウトとCSSグリッドレイアウトの違いを言うと、flexitemは1次元で、CSSグリッドレイアウトは1次元です.
二次元といっても、どうせ私は勉強して使います.どうせ柔軟なグリッドを使いたいです.
CSSグリッドレイアウト方法を選択しました.

グリッド用語

メッシュコンテナ:メッシュを適用する領域全体(表示:メッシュまたはインラインメッシュ)

メッシュ項目:コンテナのサブエレメント

グリッドレール:グリッドの行と列

メッシュユニット:メッシュ内の1つ

GridLine:Grid

グリッド番号:グリッド線の各番号

グリッド間隔:セル間隔

メッシュ領域:メッシュ線で囲まれた矩形領域(セルの集合)

グリッドアトリビュート(Grid Attributes)

display:グリッドを作成するときは、まずグリッドを適用する要素の外部をグリッドコンテナに設定し、次にプロパティをグリッドまたはインライングリッドに指定します.

.wrapper{
	display:grid;
}

grid-template-columns:属性

ex)幅200 pxバーを3つ配置する場合

grid-template-columns:200px 200px 200px;

grid-mtemplate-rows/grid-mtemplate-columns:グリッドの行、列のサイズを指定
-grid-template-rows:各項目の高さを指定

grid-template-rows:1fr 1fr 1fr;
grid-template-rows:repeat (4, 1fr);
grid-template-rows:300px 1fr;
grid-template-rows:100px 200px auto ;

注意)指定した行の高さよりもコンテンツがオーバーフローする場合はminmax()を使用します.

 grid-template-rows:minmax(300px auto);

fr単位:fr(動作)の相対長さ(トラックサイズを比例で割る)

を指定する
ex)2:1:3の割合

grid-template-columns:2fr 1fr 3fr;

注意)fr単位を繰り返し使用する場合はrepeat()を使用します.
ex)1 frを3回繰り返すごとに

grid-template-columns:repeat(3,1fr);

auto-fill/auto-fit:設定した幅にセルを最大限に埋め込む

grid-template-columns: repeat(auto-fill, minmax(20%, auto));

row-gap/column-gap/gap:セル間隔

row-gap: 10px;
column-gap: 10px;
gap : 10px 20px; //row-gap:10px; column-gap:20px;
gap: 20px // row-gap:20px; column-gap: 20px;

grid-auto-columns/grid-auto-rows:トラックサイズを指定するプロパティ

グリッド線を使用した配置

上図では、青い枠線部分に沿ったグリッド線
grid-column-start番号は1、grid-column-end番号は3、grid-column:1/3と略す.
grid-row-startは1であり、grid-row-endは2軸でgrid-row:1/2程度である.
このように緑で描かれた部分.

grid-row-start: 2;
grid-row-end: 4;
grid-row:2/4;

grid-column-start: 3;
grid-column-end: 4;
grid-column:3/4;

として指定できます.