CSSのMiscellaneousにおけるalign-tracksプロパティとは？使い方とサンプルコード解説

align-tracksプロパティには以下の値を設定できます。

space-around: アイテムの両端に余白を作り、アイテムの間隔を均等に分布します。
space-between: アイテムの間隔を均等に分布します。
baseline: アイテムのベースラインを揃えます。
stretch: アイテムの高さを最大限に伸ばし、グリッドコンテナの高さを満たします。
end: アイテムを下端に揃えます。
center: アイテムを中央に揃えます。
start: アイテムを上端に揃えます。

align-tracksプロパティは、以下の場合に役立ちます。

アイテムの間隔を調整したい場合
アイテムをグリッドコンテナの特定の位置に揃えたい場合
アイテムの高さが異なるメーソンリーレイアウトを作成する場合

例

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

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

この例では、align-tracks: space-betweenを設定することで、アイテムの間隔を均等に分布しています。

注意点

align-tracksプロパティは、grid-auto-rowsプロパティと組み合わせて使用すると、より効果的に動作します。
align-tracksプロパティは、まだ実験段階であり、すべてのブラウザでサポートされているわけではありません。

align-tracksプロパティ以外にも、CSSグリッドレイアウトには様々なプロパティがあります。詳細については、以下の資料を参照してください。

アイテムを上端に揃える

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

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

このコードでは、align-tracks: startを設定することで、すべてのアイテムが上端に揃えられます。

アイテムを中央に揃える

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

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

このコードでは、align-tracks: centerを設定することで、すべてのアイテムが中央に揃えられます。

アイテムを下端に揃える

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(50px, auto);
  align-tracks: end;
}

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

このコードでは、align-tracks: endを設定することで、すべてのアイテムが下端に揃えられます。

アイテムの高さを最大限に伸ばす

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

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

このコードでは、align-tracks: stretchを設定することで、すべてのアイテムの高さを最大限に伸ばし、グリッドコンテナの高さを満たします。

アイテムのベースラインを揃える

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: minmax(50px, auto);
  align-tracks: baseline;
}

.grid-item {
  background-color: #ccc;
  padding: 10px;
  text-align: center;
}

このコードでは、align-tracks: baselineを設定することで、すべてのアイテムのベースラインを揃えます。

アイテムの間隔を均等に分布する

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

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

このコードでは、align-tracks: space-betweenを設定することで、アイテムの間隔を均等に分布します。

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

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

align-tracksプロパティの代替方法として、以下の方法が考えられます。

flexboxを使用する

flexboxは、アイテムを柔軟に配置するためのレイアウトモードです。align-tracksプロパティと同様に、アイテムの垂直方向の配置を制御することができます。

.grid-container {
  display: flex;
  flex-wrap: wrap;
  align-items: start; /* または center, end */
}

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

この例では、flexboxを使用して、アイテムを上端に揃えています。align-itemsプロパティの値を変更することで、アイテムの配置を変更することができます。

floatを使用する

floatは、アイテムを横並びに配置するためのプロパティです。align-tracksプロパティと同様に、アイテムの垂直方向の配置を制御することができます。

.grid-container {
  overflow: hidden;
}

.grid-item {
  float: left;
  width: 200px; /* または min-content, max-content */
  background-color: #ccc;
  padding: 10px;
  margin-bottom: 10px; /* アイテム間の余白を設定 */
}

.grid-item:last-child {
  margin-bottom: 0;
}

この例では、floatを使用して、アイテムを上端に揃えています。widthプロパティの値を変更することで、アイテムの幅を変更することができます。margin-bottomプロパティを使用して、アイテム間の余白を設定することができます。

calc()関数を使用する

calc()関数を使用して、アイテムの高さを動的に計算することができます。これにより、アイテムの高さが異なる場合でも、隙間なく効率的に配置することができます。

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

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

.grid-item::after {
  content: "";
  display: block;
  height: calc(100% - grid-item.offsetHeight);
}

この例では、calc()関数を使用して、アイテムの高さを100%に設定しています。grid-item::after擬似要素を使用して、アイテムの高さを調整しています。

注意点

上記の代替方法は、align-tracksプロパティと同じ結果を保証するものではありません。また、すべてのブラウザで互換性があるわけではありません。

align-tracksプロパティは、メーソンリーレイアウトを作成するのに便利なプロパティですが、まだ新しいプロパティであり、すべてのブラウザでサポートされているわけではありません。align-tracksプロパティの代替方法として、flexbox、float、calc()関数を使用することができます。

CSSのMiscellaneousにおけるalign-tracksプロパティとは？ 使い方とサンプルコード解説

アイテムを上端に揃える

CSSのMiscellaneousにおけるalign-tracksプロパティとは？使い方とサンプルコード解説