content、items、selfとは
格子状（グリッド）に分割したレイアウトではないグリッドレイアウトで位置関係を定義する
このページで使うグリッドレイアウトの構文は、格子状レイアウトに依存しないように grid-template-columns や grid-template-rows は指定しない。そのため行や列(fr は除外)のサイズは定義しない、というもの。
justify-content、align-content などの content、align-items、place-items などの items、align-self、justify-self などの self は何であるか？フレックス？、グリッド？
-
content :
ボックス内全体を対象とする
→ コンテナに定義 -
items :
ボックス内にある全てのアイテムを対象とする
→ コンテナに定義
※( place-items : アイテムの縦方向と横方向の揃えをまとめて指定する。 Flexbox では、place-self プロパティは適用されない。 ) -
self :
個別の設定されたアイテムを対象とする
→ justify-self プロパティ は、flexbox では機能せず、グリッドレイアウトでは各アイテム要素に個別に定義
justify-content、align-content
justify-content、align-content は、グリッドレイアウト、フレックスボックスで使えるが、書字方向が右書き（direction: rtl など）の場合、start は右端になるが、flex-start は常に左端になる。
フレックスにおける align-content は、flex-wrap: wrap が指定され、フレックスコンテナ内で要素が複数行に折り返された場合にのみ機能し、各行の配置を調整する。以下は各アイテム自体もフレックスコンテナとして機能させ(フレックスボックスのネストが可能)、内部のテキスト（例：「Item 1」のテキスト）をアイテムボックスの水平方向と垂直方向の中央に配置させた。
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>.flex-container {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
height: 200px;
width: 100%;
border: 1px solid black;
background-color: rgba(255, 192, 203,0.3);
}
.flex-item {
width: 70px;
height: 50px;
background-color: skyblue;
margin: 5px;
display: flex; /* flexbox のネスト */
flex-wrap: wrap;
align-content: center;
justify-content: center;
font-size: 16px;
color: #fff;
display: flex;
}justify-〇〇 、align-〇〇の値で、flex-start、flex-end は、フレックスのみで使われるキーワード値だ。グリッドレイアウトでは同様の定義は 「end」で、フレックスは 「flex-end」 の値を使うなど、実にややこしいのがこのプロパティである。
「flex-start」が使える条件は、親要素に display: flex; が指定されていることである。
以下の例では、コンテナに「display: flex; justify-content: center; align-items: center;」を定義している。
テキスト
テキスト
<div style="display: flex; justify-content: center; align-items: center; height: 200px; border: 2px solid #ccc; margin-bottom: 1em;">
<div style="text-align: center; background-color: #f0f0f0; padding: 20px; margin: 10px;">中央に揃えたい
<br>テキスト
</div>
<div style="text-align: center; background-color: #f0f0f0; padding: 20px; margin: 10px;">中央に揃えたい
<br>テキスト
</div>
</div>align-items プロパティとは
align-items プロパティは、フレックスボックスとグリッドレイアウトの両方のコンテナ内で使用できる。
align-items と align-content とどこが違うのかというと、アイテムが複数行にわたって折り返される場合、各行の配置は align-content プロパティで制御する。align-items は、1行（または各行）内のアイテムの配置を制御するものである。以下にサンプルを用意した。ソースをみればより分かり易い。
align-items: center; を使ったサンプル
コンテナの交差軸（通常、Flexbox では縦方向、Grid では行方向）に沿って、子要素をどのように揃えるかを指定する。次の例では、一行のグリッドアイテムを対象にしたもの。align-content は、flex-wrap: wrap が指定され、フレックスコンテナ内で要素が複数行に折り返された場合にのみ機能し、各行の配置を調整する。
<div class="grid-align-items-container">
<div class="grid-align-items-item">item</div>
</div>.grid-align-items-container {
display: grid; /* グリッドコンテナとして設定 */
align-items: center; /* 子要素を縦方向に中央揃え */
height: 200px; /* 親要素に高さを持たせることで中央揃えの効果が分かりやすい */
border: 1px solid #DCDCDC;
margin-bottom: 1em;
}
.grid-align-items-item {
background-color: lightblue;
padding: 10px;
text-align: center;
}place-items: align-items の指定 , justify-items の指定検証：CSSの justify-selfプロパティを flexbox に定義する
CSS の justify-self プロパティは、フレックスレイアウト（Flexbox）では機能しない。以下に提示した通り、フレックスアイテムに justify-self: flex-start; と justify-self: flex-end; を各々設定してはみたが、機能しなかった。
<div class="flex__container">
<div class="flex__item--left">left</div>
<div class="flex__item">center-1</div>
<div class="flex__item">center-2</div>
<div class="flex__item--right">right</div>
</div>.grid-align-items-container {
display: grid; /* グリッドコンテナとして設定 */
align-items: center; /* 子要素を縦方向に中央揃え */
height: 200px; /* 親要素に高さを持たせることで中央揃えの効果が分かりやすい */
border: 1px solid #DCDCDC;
margin-bottom: 1em;
}
.grid-align-items-item {
background-color: lightblue;
padding: 10px;
text-align: center;
}検証：CSSの justify-selfプロパティを グリッドレイアウトに定義する
CSS の justify-self プロパティは、グリッドレイアウト（Grid layout）では機能する。以下に提示した通り、グリッドレイアウトのアイテムに justify-self: flex-start; と justify-self: flex-end; を各々設定して、機能した。
<div class="grid__container">
<div class="grid__item--left">left</div>
<div class="grid__item">center-1</div>
<div class="grid__item">center-2</div>
<div class="grid__item--right">right</div>
</div>.grid__container {
display: grid;
justify-content: center;
align-items: center;
width: 100%;
height: 40px;
background-color: Gainsboro;
margin-bottom: 1em;
}
.grid__item--left {
justify-self: start;
}
.grid__item--right {
justify-self: end;
}