Google Chromeではdisplay: grid以外の要素の中でもjustify-selfが有効になってしまう

Last updated at 2025-03-31Posted at 2025-03-23

この記事の概要

タイトルで完結している気もしますが、ブラウザによってjustify-selfの挙動が違うので備忘録がてらまとめた記事です。

なお、この情報は2025年3月23日時点のものです。

前提の確認

justify-selfはGridの中で配置を制御するプロパティです。

CSS Gridを使う場合、多くは親要素から子要素の配置方法を指定するのですが、子要素が自分自身の配置を制御することもできます。

その、自分自身を制御するときに使うプロパティの1つがjustify-selfです。

グリッドのセルの、インライン方向中心¹に配置します。

起きる事象

以下の条件で、各ブラウザで表示の違いを確認します。

display: blockとdisplay: gridのコンテナを作成する
それぞれのコンテナの中に3つずつ要素を配置する
1つ目の要素にjustify-self: centerを指定する

実際のコード

<div class="container block">
  <p class="item center">Block item</p>
  <p class="item">Block item</p>
  <p class="item">Block item</p>
</div>

<div class="container grid">
  <p class="item center">Grid item</p>
  <p class="item">Grid item</p>
  <p class="item">Grid item</p>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  padding: 2rem;
}

.container {
  background-color: #ddd;
  padding: 1rem;
  
  & + .container {
    margin-top: 1rem;
  }
}

.block {
  display: block;
}

.grid {
  display: grid;
}

.item {
  background-color: #eee;
  padding: 0.5rem;
  
  & + .item {
    margin-top: 0.5rem;
  }
}

.center {
  justify-self: center;
}