プロパティ place-items

プロパティ place-items は、 列と行の配置を同時に設定します。 これにより、使用するコードを大幅に削減できます。 最初の値は垂直軸に沿った配置を設定し、 2番目の値は水平軸に沿った配置を設定します。 プロパティ place-items は 親要素で設定します。 place-items の動作の確認は、 ブラウザのデバッガーを通じて行うと便利です。

構文

cssセレクター {
  place-items: 水平方向の配置値 垂直方向の配置値;
}

例 . 垂直軸中央、水平軸始点による配置

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  place-items: center start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ブラウザのデバッガーでこのグリッドを見てみましょう:

例 . 垂直軸終点、水平軸中央による配置

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: end center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ここで、デバッガーパネルを 見てみましょう:

例 . 垂直軸始点、水平軸終点による配置

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  place-items: start end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ブラウザのデバッガーを使用して セル内のアイテムの配置を見てみましょう:

関連項目