「justify-tracks」って何？CSS Grid Layout Module Level 3で登場した新機能

Masonry Gridとは、アイテムの高さが異なる場合でも、隙間なく整列して表示されるグリッドレイアウトです。従来のグリッドレイアウトでは、アイテムの高さが異なる場合、隙間が発生したり、アイテムが不揃いに表示されたりしていました。"justify-tracks"プロパティを使用することで、これらの問題を解決し、柔軟性とデザイン性を兼ね備えたレイアウトを作成することができます。

"justify-tracks"プロパティの構文は以下の通りです。

justify-tracks: <justify-track-alignment>+ ;

<justify-track-alignment>には、以下のいずれかの値を指定することができます。

space-around：アイテムの周囲に均等な余白を設けます。
space-between：アイテムの間隔を均等に分布させます。
stretch：アイテムをグリッドの利用可能なスペース全体に伸縮させます。
center：アイテムをグリッドの中央に揃えます。
end：アイテムをグリッドの終了端に揃えます。
start：アイテムをグリッドの開始端に揃えます。

例

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-tracks: space-between;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

この例では、**"justify-tracks: space-between"**を指定することで、アイテムの間隔を均等に分布させています。

"justify-tracks"プロパティは、まだすべてのブラウザで完全にサポートされているわけではありません。現時点では、Chrome、Edge、Safari、Firefoxで利用することができます。

"justify-tracks"プロパティの利点は以下の通りです。

デザイン性の高いレイアウトを作成できる
アイテムの配置を柔軟にコントロールできる
アイテムの高さが異なる場合でも、隙間なく整列して表示できる

"justify-tracks"プロパティの欠点は以下の通りです。

複雑なレイアウトを作成する場合、難易度が高くなる
まだすべてのブラウザで完全にサポートされていない

"justify-tracks"プロパティは、Masonry Gridレイアウトを作成したい場合に非常に有用なプロパティです。しかし、まだ新しいプロパティであるため、すべてのブラウザで完全にサポートされているわけではありません。複雑なレイアウトを作成する場合には、注意が必要です。

"justify-tracks"プロパティは、CSS Grid Layout Module Level 3で導入された新しいプロパティです。これは、Masonry Gridと呼ばれるレイアウトスタイルをCSSで実現するために使用されます。"justify-tracks"プロパティを使用することで、アイテムの高さが異なる場合でも、隙間なく整列して表示されるグリッドレイアウトを作成することができます。

例1：アイテムの高さが異なる場合

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-tracks: space-between;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

例2：アイテムをグリッドの開始端に揃える

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-tracks: start;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

この例では、**"justify-tracks: start"**を指定することで、アイテムをグリッドの開始端に揃えています。

例3：アイテムをグリッドの中央に揃える

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-tracks: center;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

この例では、**"justify-tracks: center"**を指定することで、アイテムをグリッドの中央に揃えています。

例4：アイテムをグリッドの利用可能なスペース全体に伸縮させる

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-tracks: stretch;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

この例では、**"justify-tracks: stretch"**を指定することで、アイテムをグリッドの利用可能なスペース全体に伸縮させています。

例5：アイテムの周囲に均等な余白を設ける

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-tracks: space-around;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

この例では、**"justify-tracks: space-around"**を指定することで、アイテムの周囲に均等な余白を設けています。

これらの例はほんの一例です。"justify-tracks"プロパティを組み合わせることで、さまざまなレイアウトを作成することができます。

代替方法としては、以下の方法が考えられます。

Flexboxを使用する

Flexboxは、アイテムを柔軟に配置するためのレイアウトモジュールです。"justify-tracks"プロパティと同様に、アイテムを軸方向に配置することができます。

.grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.item {
  background-color: #ccc;
  padding: 10px;
  flex: 1;
}

この例では、Flexboxを使用して、アイテムを等間隔に配置しています。

Grid Layoutのガーターを使用する

Grid Layoutのガーターは、グリッド内の空きスペースを制御するための機能です。"justify-tracks"プロパティと同様に、アイテムを軸方向に配置することができます。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.item {
  background-color: #ccc;
  padding: 10px;
}

この例では、Grid Layoutのガーターを使用して、アイテムを等間隔に配置しています。

擬似要素を使用する

擬似要素を使用して、アイテムを軸方向に配置することができます。

.grid {
  position: relative;
}

.item {
  background-color: #ccc;
  padding: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
}

.item::before,
.item::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}

.item::before {
  left: 0;
}

.item::after {
  right: 0;
}

この例では、擬似要素を使用して、アイテムを等間隔に配置しています。

JavaScriptを使用する

JavaScriptを使用して、アイテムを動的に配置することができます。

const grid = document.querySelector(".grid");
const items = grid.querySelectorAll(".item");

items.forEach((item, index) => {
  item.style.top = `${index * 20}px`;
});

この例では、JavaScriptを使用して、アイテムを20ピクセルずつずらして配置しています。

JavaScriptは、動的なレイアウトに適しています。
擬似要素は、特殊なレイアウトに適しています。
Grid Layoutのガーターは、より複雑なレイアウトに適しています。
Flexboxは、シンプルなレイアウトに適しています。