記事には個人的な理解が含まれていますので、誤りがあればご指摘ください。
過去の記事
カルーセルスワイパーフレームワークの基本的な使い方
【Transform3D】詳細変換（読んでから読む）
【cssアニメーション】動く車
[CSS3] float と position の配置に関する一般的な問題 (個人的なメモ)
レスポンシブ レイアウトを完成させるには、いくつかの方法があります。これを見れば十分
CSS3での最適なレイアウト方法を詳しく解説 - flex フレキシブル レイアウト (あなたはそれを読むでしょう)
【フロントエンドCSS高頻度取材質問】 0.5pxの境界線の描き方（詳細解説）
CSS3基本プロパティ大全
CSS3アニメーションプロパティ アニメーション詳細解説（読ませていただきます）
CSS3トランスフォーム 移動・回転・スケーリングの2D変換（詳細説明）
CSS3 Z-Index 詳細説明CSS3 ポジションポジショニング 詳細説明（わかりやすい）
目次
grid-template-columns プロパティ、grid-template-rows プロパティ
justify-items プロパティ、align-items プロパティ、place-items プロパティ
justify-content プロパティ、align-content プロパティ、place-content プロパティ
grid-column-start プロパティ、grid-column-end プロパティ、grid-row-start プロパティ、grid-row-end プロパティ
justify-self プロパティ、align-self プロパティ、place-self プロパティ
序文
導入
グリッド レイアウト (Grid) は、最も強力な CSS レイアウト スキームです。
Web ページをグリッドに分割し、異なるグリッドを任意に組み合わせてさまざまなレイアウトを作成できます。
Grid レイアウトは、コンテナーを「行」と「列」に分割してセルを生成し、次に「項目が配置されている」セルを指定する、 2 次元のレイアウトと見なすことができます。グリッド レイアウトは、フレックス レイアウトよりもはるかに強力です。
基本的な考え方
コンテナとプロジェクト
グリッドレイアウトを使用する領域を「コンテナ」と呼びます。コンテナ内のグリッド配置された子要素は「アイテム」と呼ばれます。
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上記のコードでは、最も外側の <div> 要素がコンテナーで、内側の 3 つの <div> 要素が項目です。
注: 項目は、コンテナーの最上位の子要素にすることしかできず、項目の子要素を含めることはできません。たとえば <p> 、上記のコードの要素は項目ではありません。グリッド レイアウトはアイテムでのみ機能します。
行と列
グリッド ページ レイアウト全体は、行と列で構成されます。グリッド レイアウトを使用する場合は、行と列を個別に設計する必要があります。
細胞
各行と列にセルがあり、セルに必要なものを追加できます。
グリッドライン
な
グリッドの境界はグリッド線で、上下のグリッド線と左右のグリッド線に分かれています。
属性
親コンテナのプロパティ
表示プロパティ
直接の子要素に対してのみ有効です。
display: grid;
display: inline-grid;display: grid; プロパティを親要素のブロック スタイル グリッド レイアウトに追加します。
インライン スタイルのグリッド レイアウトに display: inline-grid プロパティを使用することもできます。
グリッドレイアウトを設定すると、コンテナの子要素（アイテム）の 、 、 など の
float設定display: inline-blockは 無効になりますので注意してください。display: table-cellvertical-aligncolumn-*
grid-template-columns プロパティ、grid-template-rows プロパティ
グリッド レイアウトを設定したら、行と列のサイズを設定する必要があります。
grid-template-columns は列の数とサイズを設定します
grid-template-rows は、行の数とサイズを設定します
<style>
.container {
display: grid;
/* 设置列数 同时设置了列的宽度 */
grid-template-columns: 100px 100px 100px;
/* 设置行数 同时设置了行的宽度 如果没有设置行数将会自动根据
元素数量自动设置*/
grid-template-rows: 100px 100px 100px;
}
.item {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body> 
な
行を設定しない場合は、列のみ。
な
絶対値のほか、パーセンテージ（親の大きさに対する割合）なども設定できます。
.container {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
/* repeat 两个值第一个值是重复次数 第二个是具体指
上下两个效果是一样的 */
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
/* auto-fill 表示自动填充 可以最大限度的填满 父级容器
用多个100px的大小填满宽度*/
grid-template-columns: repeat(auto-fill, 100px);
/* fr 是一个相对单位 大家可以理解为所占的份数
将宽度分成两份占满 类似flex布局的里的flex属性。*/
grid-template-columns: 1fr 1fr;
/* minmax（）表示一个范围 第一个值为最小多长 第二个数为最大*/
grid-template-columns: 1fr 2fr minmax(200px, 3fr);
/* auto关键字 填充剩余空间
下面这两个相等*/
grid-template-columns: 100px auto 100px;
grid-template-columns: 100px 1fr 100px;
}グリッド線に名前を付けることもできます。各 [name] は線に相当します。
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}行ギャップ属性、列ギャップ属性、ギャップ属性
行間の距離を設定する row-gap プロパティ。
列と列の間の距離を設定する column-gap プロパティ。
ギャップ プロパティは、上記の 2 つのプロパティのマージされたプロパティです。最初の値は行で、2 番目の値は列です。
.container {
row-gap: .625rem;
column-gap: .625rem;
/* 上面两个的效果等于下面这一个属性
如果只写一个值，第二个值则等于第一个 */
gap: 0.625rem 0.625rem;
}
grid-template-areas プロパティ
テーブル領域の定義
.container {
一个格子一个区域
grid-template-areas: 'a b c'
'd e f'
'g h i';
定义三个区域
rid-template-areas: 'a a a'
'b b b'
'c c c';
.item1 {
grid-area: a;
background-color: blue;
}
.item {
border: 1px solid black;
background-color: red;
}
如果某些区域不需要利用，则使用 “点”（.）表示。
grid-template-areas: 'a . c'
'd . f'
'g . i';
} 
な
親が高さを設定すると、4 番目の行がいっぱいになります。
grid-auto-flow プロパティ
grid-auto-flow は配置方向を変更します
子要素は、デフォルトで左から右に順番に配置されます
grid-auto-flow: column;これが列の並べ替えになります
justify-items プロパティ、align-items プロパティ、place-items プロパティ
justify-items プロパティは、すべてのセルの内容の水平位置を設定します。
align-items プロパティは、セル コンテンツの垂直位置を設定します。
.container {
开头 |结尾|居中|拉伸
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}justify-content プロパティ、align-content プロパティ、place-content プロパティ
justify-content 属性は、コンテナ内のコンテンツ領域全体の水平位置です。
align-content プロパティは、コンテンツ領域全体の垂直位置です。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}- start - 整列されたコンテナーの開始境界。
- end - 整列されたコンテナーの終了境界。
- center - コンテナの内側を中央に配置します。
- ストレッチ - アイテムのサイズが指定されていない場合、グリッド コンテナー全体を占めるようにストレッチします
- space-around - 各アイテムの両側に等間隔。したがって、アイテム間のスペースは、アイテムとコンテナーの境界線の間のスペースの 2 倍になります。
- space- between - アイテム間のスペースは等しく、アイテムとコンテナーの境界の間にスペースはありません。
- space-evenly - アイテムはアイテム間で等間隔に配置され、アイテムはコンテナの境界線から同じ長さで配置されます。
.container {
height: 100vh;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
row-gap: .625rem;
column-gap: .625rem;
gap: 0.625rem 0.625rem;
grid-template-areas: "a a ." "b b ." "c c c";
justify-items: center;
align-items: center;
justify-content: center;
align-content: center;
}
.item1 {
grid-area: a;
background-color: blue;
}
.item2 {
grid-area: b;
}
.item {
width: 50%;
height: 50%;
border: 1px solid black;
background-color: red;
}
な
セル内の赤い背景ブロックは、100px*100px 内の正方形内で水平方向および垂直方向の中央に配置され、グリッド全体もページの水平方向の中央に配置されます. 赤い正方形のサイズが設定されていない場合、内部のテキストは水平方向に中央に配置されます.そして垂直。
な
place-content 属性は 、align-content 属性と 属性をjustify-content 組み合わせた省略形です。
place-content: <align-content> <justify-content>子要素の属性
grid-column-start プロパティ、grid-column-end プロパティ、grid-row-start プロパティ、grid-row-end プロパティ
これらのプロパティは、表の行を介して子要素の位置を変更できます。
grid-column-startプロパティ: 左の境界線が配置される垂直開始グリッド線grid-column-end属性: 右の境界線が配置されている垂直端のグリッド ラインgrid-row-start属性: 上部境界線が位置する水平開始グリッド線grid-row-end属性: 下の境界線が配置されている水平エンドポイント グリッド ライン
.container {
height: 100vh;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
row-gap: .625rem;
column-gap: .625rem;
grid-template-areas: "a a ." "b b ." "c c c";
}
.item1 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
/* grid-area: a; */
background-color: blue;
}
/* .item2 {
grid-area: b;
} */
.item {
border: 1px solid black;
background-color: red;
}
な
ブロック 1 は、テーブルの横 2 行目から 3 行目まで、テーブルの縦の 1 行目から 3 行目まで移動します。
注: 移動する場合、area 属性を使用して、領域のサブ要素を分割すると、サブ要素は移動しませんが、カスケード フローティング効果が生成されます。z-index 属性を使用して、レベルを変更できます。 .
このプロパティには、行数ではなく、またがるグリッドの数を示す span キーワードも使用できます。
.item-1 {
grid-column-start: span 2;
效果是一样的 start end都可以
grid-column-end: span 2;
}これは、左右の線の間に 2 つの正方形がある、つまり 2 つの位置を占めていることを意味します。
な
また、grid-column プロパティと grid-row プロパティは、それぞれ列の開始と終了、および行の開始と終了を組み合わせたプロパティです。
justify-self プロパティ、align-self プロパティ、place-self プロパティ
セルのコンテンツの水平および垂直位置を設定します。
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
} .item3 {
height: 30px;
align-self: center;
grid-area: c;
} 
な
プレースセルフ属性は、上記の 2 つの属性と氷属性の合計です。
place-self: <align-self> <justify-self>;
这个属性是 先垂直后水平