フロントエンドエンジニア必見！CSS align-tracks でワンランク上のレイアウト

CSS align-tracks プロパティ

align-tracks は、CSS Grid レイアウトにおける 組積軸 方向のグリッドトラックの配置を制御するプロパティです。これは、実験的な機能 であり、全てのブラウザでサポートされているわけではありません。

適用対象

align-tracks は、以下の条件を満たす要素にのみ適用されます。

• display: grid または display: inline-grid である
• grid-template-columns または grid-template-rows で定義された 組積 方向のトラックを持つ

プロパティ値

align-tracks は以下の値を受け取ります。

• stretch: すべてのトラックを伸縮させ、コンテナーのサイズに合わせて隙間なく配置します。
• start: すべてのトラックをコンテナーの開始端に配置します。
• end: すべてのトラックをコンテナーの終了端に配置します。
• center: すべてのトラックをコンテナーの中央に配置します。
• space-between: すべてのトラックを等間隔に配置します。
• space-around: すべてのトラックの間に等しい間隔を設け、両端にも余白を設けます。

使用例

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-tracks: space-between;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

上記の例では、grid-container は3つの列と自動的に調整される行を持つグリッドレイアウトになります。align-tracks: space-between によって、すべての行が等間隔に配置されます。

補足

• align-tracks は、align-content プロパティと似ていますが、align-content はグリッドアイテムの配置を制御するのに対し、align-tracks はグリッドトラックの配置を制御します。
• align-tracks は、まだ実験的な機能であるため、ブラウザの互換性に注意が必要です。

align-tracks を使ったサンプルコード

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-tracks: space-between;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

中央に配置

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-tracks: center;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

開始端に配置

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-tracks: start;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

終了端に配置

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-tracks: end;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

伸縮

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-tracks: stretch;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

align-content との比較

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.align-tracks {
  align-tracks: space-between;
}

.align-content {
  align-content: space-between;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

上記の例では、align-tracks と align-content の違いを確認できます。

複数行に適用

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  align-tracks: space-between;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

異なる値を組み合わせる

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  align-tracks: start space-between;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

上記の例では、1行目は start、2行目は space-between と異なる値を組み合わせています。

メディアクエリによる切り替え

@media (min-width: 768px) {
  .grid-container {
    align-tracks: center;
  }
}

@media (max-width: 767px) {
  .grid-container {
    align-tracks: space-between;
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.grid-item {

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

align-content と justify-content の組み合わせ

align-content は、グリッドアイテムの垂直方向の配置を制御し、justify-content は水平方向の配置を制御します。これらのプロパティを組み合わせることで、align-tracks と同様の効果を得ることができます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  align-content: space-between;
  justify-content: center;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

margin プロパティを使用して、グリッドアイテムの余白を調整することで、align-tracks と同様の効果を得ることができます。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

Flexbox レイアウトは、1次元方向にアイテムを配置するレイアウトシステムです。align-items プロパティを使用して、アイテムの垂直方向の配置を制御することができます。

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

.grid-item {
  background-color: red;
  width: 100px;
  height: 100px;
}

CSS Grid レイアウトのその他の機能

align-tracks 以外にも、CSS Grid レイアウトには、グリッドトラックの配置を制御する様々な機能があります。

• grid-template-areas プロパティ: グリッドトラックを明示的に定義する
• grid-gap プロパティ: グリッドアイテム間の余白を設定する
• place-items プロパティ: アイテムの配置をまとめて設定する

これらの機能を組み合わせることで、align-tracks を使用しなくても、様々なレイアウトを実現することができます。

注意点

• 上記の代替方法は、align-tracks と完全には同じ効果を得られない場合があります。
• ブラウザの互換性を考慮する必要があります。

align-tracks は、グリッドトラックの配置を制御する便利なプロパティですが、まだ実験的な機能であり、すべてのブラウザでサポートされているわけではありません。

代替方法として、align-content と justify-content の組み合わせ、margin プロパティ、Flexbox レイアウト、CSS Grid レイアウトのその他の機能などを利用することができます。

どの方法を選択するかは、要件とブラウザの互換性などを考慮して決定する必要があります。