place-items

プレイスアイテムズ（グリッド）

意味グリッドアイテムの縦横両方向の配置

place-itemsとは？

place-itemsは、グリッドアイテムを縦横両方向に配置する際に使用します。このプロパティはalign-itemsとjustify-itemsのショートハンドであり、それぞれ縦方向と横方向の配置を一度に指定できます。

place-itemsの具体的な使い方

グリッドアイテムを完全中央に配置する例

<style>
  .container {
    display: grid;
    place-items: center;
  }
</style>

<div class='container'>
  グリッドアイテムが縦横中央に配置されています。
</div>

グリッドコンテナ内のアイテムを縦横中央に配置します。

グリッドアイテムを上端中央に配置する例

<style>
  .container {
    display: grid;
    place-items: start center;
    height: 200px;
  }
</style>

<div class='container'>
  <div>上端中央に配置されたアイテム</div>
</div>

グリッドコンテナ内のアイテムを上端中央に配置します。

place-itemsに関するよくある質問

Q. place-itemsの値の順序は？

A. place-itemsは「align-items justify-items」の順で値を指定します。1つの値だけを指定した場合、両方に同じ値が適用されます。

Q. place-itemsとplace-contentの違いは？

A. place-itemsは個々のグリッドアイテムの配置を制御し、place-contentはグリッドトラック全体の配置を制御します。place-itemsはアイテム内のコンテンツに、place-contentはグリッド全体に影響します。

Q. place-itemsの互換性は？

A. place-itemsは比較的新しいプロパティで、一部の古いブラウザではサポートされていない場合があります。クロスブラウザ対応が必要な場合は、align-itemsとjustify-itemsを個別に使用することを検討してください。

place-itemsが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのplace-itemsやgrid-row、align-content、grid-template、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。