レスポンシブにも対応！ justify-tracks プロパティを使ったマルチデバイス対応レイアウト

CSS Grid レイアウトにおける justify-tracks プロパティ

justify-tracks プロパティは、CSS Grid レイアウトにおいて、グリッドコンテナの行方向に配置されたトラックの間隔と配置を制御します。これは、masonry レイアウトと組み合わせて使用することで、より柔軟で洗練されたレイアウトを作成することができます。

適用範囲

justify-tracks プロパティは以下の条件を満たす場合にのみ適用されます。

• グリッドコンテナが display: grid または display: inline-grid である
• グリッドコンテナの行方向に masonry レイアウトが設定されている

プロパティ値

justify-tracks プロパティは以下の値を受け取ります。

• start: トラックをグリッドコンテナの行方向の始端に配置します。
• space-between: トラックを均等に配置し、両端の余白を同じにします。
• space-around: トラックを均等に配置し、各トラック間の余白を同じにします。

使用例

以下の例では、justify-tracks プロパティを使用して、3つのトラックを異なる方法で配置しています。

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

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

結果

justify-tracks example: [無効な URL を削除しました]

上記例では、justify-tracks: space-between を使用しているため、3つのトラックが均等に配置され、両端の余白が同じになっています。

その他の値

justify-tracks プロパティには、上記以外にも以下の値があります。

• stretch: トラックをグリッドコンテナの行方向に伸縮させます。
• normal: ブラウザのデフォルトの配置を使用します。

注意点

• justify-tracks プロパティは、IE 11 以前ではサポートされていません。
• justify-tracks プロパティは、masonry レイアウトと組み合わせて使用しないと効果がありません。

justify-tracks プロパティのサンプルコード

トラックを均等に配置する

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

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

結果

justify-tracks example: [無効な URL を削除しました]

上記例では、justify-tracks: space-between を使用しているため、3つのトラックが均等に配置され、両端の余白が同じになっています。

トラックを中央に配置する

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

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

結果

justify-tracks example: [無効な URL を削除しました]

上記例では、justify-tracks: center を使用しているため、3つのトラックがグリッドコンテナの行方向の中央に配置されています。

トラックを伸縮させる

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

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

結果

justify-tracks example: [無効な URL を削除しました]

上記例では、justify-tracks: stretch を使用しているため、3つのトラックがグリッドコンテナの行方向に伸縮されています。

トラックを左右に配置する

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

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

結果

justify-tracks example: [無効な URL を削除しました]

上記例では、justify-tracks: start を使用しているため、3つのトラックがグリッドコンテナの行方向の始端に配置されています。

トラックを左右に等間隔に配置する

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  masonry-auto-flow: row;
  justify-tracks: space-around;
}

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

結果

justify-tracks example: [無効な URL を削除しました]

上記例では、justify-tracks: space-around を使用しているため、3つのトラックがグリッドコンテナの行方向に等間隔に配置されています。

複数の値を組み合わせて使用

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  masonry-auto-flow: row;
  justify-tracks: space-between stretch;
}

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

結果

justify-tracks example: [無効な URL を削除しました]

上記例では、justify-tracks: space-between stretch を使用している

justify-tracks プロパティの代替方法

justify-content プロパティは、グリッドコンテナの子要素を水平方向に配置するために使用できます。masonry レイアウトと組み合わせて使用することで、トラックを間接的に配置することができます。

例

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

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

結果

justify-content example: [無効な URL を削除しました]

上記例では、justify-content: space-between を使用しているため、3つのトラックがグリッドコンテナの行方向に均等に配置され、両端の余白が同じになっています。

flexbox レイアウトは、1次元または2次元のレイアウトを作成するために使用できるレイアウトシステムです。justify-content プロパティと align-items プロパティを使用して、トラックを水平方向と垂直方向に配置することができます。

例

.grid-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

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

結果

flexbox example: [無効な URL を削除しました]

上記例では、flex-direction: column と justify-content: space-between を使用しているため、3つのトラックがグリッドコンテナの行方向に均等に配置され、両端の余白が同じになっています。

CSS Grid レイアウトのその他のプロパティ

justify-tracks プロパティ以外にも、CSS Grid レイアウトにはトラックを配置するために使用できるプロパティがいくつかあります。

• grid-template-columns: グリッドコンテナの列の幅を指定します。
• grid-template-rows: グリッドコンテナの行の高さ