align-itemsとjustify-itemsを一括で設定するショートハンドプロパティです。Grid/Flexboxで中央配置が簡単になります。
place-items: <align-items> <justify-items>| place-items-center | place-items: center |
| place-items-start | place-items: start |
| place-items-stretch | place-items: stretch |
.grid-container {
display: grid;
place-items: center;
}グリッドアイテムを中央配置
place-items: start end;垂直方向は開始、水平方向は終端に配置
1つの値で両方向、2つの値で個別指定。中央配置の最短記法。
place-items: centerはgridの完全中央寄せ最短コード(align-items + justify-itemsの一括指定)ですが、AIはこれをflexコンテナに書くことがあります。flexにはjustify-itemsが存在しないため半分しか効きません(flexならalign-items + justify-content)。2値指定の順序はalign→justifyです。
display: grid; place-items: center の1行中央寄せと、flexでの中央寄せの使い分けを説明して実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。