CSS Place Items Generator

Grid/Flexboxのplace-items、place-content、place-selfプロパティを視覚的に設定。

表示モード

align-items

justify-items

align-content

justify-content

place-self (最初のアイテム)

プレビュー

生成されたCSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 80px);
  gap: 10px;
  place-items: center;
  place-content: center;
}

.item {
  width: 60px;
  height: 40px;
  background: #3b82f6;
}

CSS Place Propertiesとは？

place-items、place-content、place-selfは、GridやFlexboxレイアウトでアイテムの配置を制御するショートハンドプロパティです。

place-items: align-items + justify-itemsのショートハンド
place-content: align-content + justify-contentのショートハンド
place-self: align-self + justify-selfのショートハンド