align-tracks
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
align-tracks
は CSS のプロパティで、ブロック軸が組積であるグリッドコンテナーの組積軸の配置を設定します。
構文
css
/* キーワード値 */
align-tracks: start;
align-tracks: space-between;
align-tracks: center;
align-tracks: start, center, end;
/* グローバル値 */
align-tracks: inherit;
align-tracks: initial;
align-tracks: revert;
align-tracks: unset;
このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。
値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。
値
start
-
アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。
end
-
アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。
center
-
アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。
normal
-
start
として動作します。 -
baseline first baseline
last baseline
-
ボックスの先頭または末尾のベースラインセットの配置ベースラインを、ベースライン共有グループのすべてのボックスの共有された先頭または末尾のベースラインセットの対応するベースラインに合わせます。
first baseline
の代替配置はstart
、last baseline
の代替配置はend
です。 space-between
-
アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。
space-around
-
アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。
space-evenly
-
アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。
stretch
-
アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。
公式定義
関連情報
align-tracks =
[ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#
<baseline-position> =
[ first | last ]? &&
baseline
<content-distribution> =
space-between |
space-around |
space-evenly |
stretch
<overflow-position> =
unsafe |
safe
<content-position> =
center |
start |
end |
flex-start |
flex-end
例
align-tracks に複数の値がある組積レイアウト
仕様書
Specification |
---|
CSS Grid Layout Module Level 3 # tracks-alignment |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- 関連する CSS プロパティ:
justify-tracks
,masonry-auto-flow