公開日: 2024 年 9 月 19 日
CSS ワーキング グループは、2 つの CSS マサリ提案を 1 つのドラフト仕様に統合しました。これにより、2 つのオプションを簡単に比較して最終的な決定を下すことができるようになることを期待しています。Chrome チームは、個別のマサリ構文が最善の方法であると引き続き考えています。前回の投稿で説明した最大のパフォーマンスの問題は解決されていますが、構文、初期値、グリッドと組み合わせたバージョンの習得のしやすさについては、まだ懸念事項があります。
ただし、この仮説をテストするために、いくつかの例を試して、各バージョンでマソンリーがどのように機能するかを示しました。この投稿の例を確認し、フィードバックをお寄せください。フィードバックに基づいて、この機能の導入を決定いたします。
この記事では、考えられるすべてのユースケースを網羅しているわけではありませんが、マサニをグリッド レイアウトから分離しても、機能が不足することはありません。実際は、その逆かもしれません。この記事では、display: masonry バージョンで新たに利用可能になった機能と、よりシンプルになった構文について説明します。また、多くのデベロッパーから、マサリでアイテムの並べ替えを行うとユーザー補助の問題が発生する可能性があるという懸念が寄せられています。この問題は、提案されている reading-flow プロパティを通じて、両方のバージョンの構文でも対処されています。
基本的なマサモリ レイアウト
ほとんどの人がマサモリと聞いて思い浮かべるレイアウトです。アイテムは行で表示されます。最初の行が配置されると、それ以降のアイテムは、短いアイテムが残したスペースに移動します。
display: masonry でログイン
マサニ レイアウトを作成するには、display プロパティに masonry の値を使用します。これにより、定義した（またはコンテンツによって定義された）列トラックと、他の軸のマージンが配置されたマサニョ レイアウトが作成されます。最初の項目はブロックとインラインの先頭（英語では左上）に表示され、項目はインライン方向に配置されます。
トラックを定義するには、CSS グリッド レイアウトで使用されるトラックリストの値を指定して masonry-template-tracks を使用します。
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
display: grid でログイン
マサニョ レイアウトを作成するには、まず display プロパティに grid の値を使用してグリッド レイアウトを作成します。grid-template-columns プロパティで列を定義し、grid-template-rows に masonry の値を指定します。
これにより、自動配置されたグリッドアイテムで想定されるレイアウトが作成されますが、各行のアイテムはマサニ レイアウトを使用し、前の行の小さなアイテムが残したスペースを占有するように再配置されます。
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
2 つのオプションの比較ポイント
これらのメソッドの大きな違いは、display: masonry バージョンでは、masonry-template-tracks でトラックを指定しなくてもマサニョ レイアウトが生成されることです。そのため、display: masonry だけで十分な場合があります。これは、masonry-template-tracks の初期値が repeat(auto-areas, auto) であるためです。レイアウトでは、コンテナに収まる数の自動サイズのトラックを作成します。
モルタルを使用した逆流
仕様には、マサニの流れの方向を変更する方法が含まれています。たとえば、ブロックの端から上に向かって表示するようにフローを変えることができます。
display: masonry でログイン
display: masonry を使用してマサニャ レイアウトを作成し、値が column-reverse の masonry-direction を使用します。
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
display: grid でログイン
display: grid と grid-template-rows: masonry を使用してマサニ レイアウトを作成します。次に、grid-auto-flow プロパティに新しい値 row-reverse を指定して、アイテムがグリッド コンテナのブロックの端からレイアウトされるようにします。
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
2 つのオプションの比較ポイント
display: masonry バージョンは、flexbox の仕組みと非常によく似ています。masonry-direction プロパティの値を column-reverse にして、列の流れ方向を変更します。
CSS グリッド バージョンでは grid-auto-flow が使用されます。現在定義されているように、grid-auto-flow: row-reverse と grid-auto-flow: column-reverse は同じ効果になります。別の処理を期待している場合は混乱する可能性があります。
行の Masonry
方向を変更して行を定義することもできます。
display: masonry でログイン
display: masonry を使用してマサニ レイアウトを作成し、masonry-direction の値を row に設定します。行に特定のブロックサイズを設定する場合を除き、トラックのサイズはデフォルトで auto であるため、トラックは含まれるコンテンツに合わせてサイズが調整されるため、トラックのサイズを指定する必要はありません。
.masonry {
display: masonry;
masonry-direction: row;
}
display: grid でログイン
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
2 つのオプションの比較ポイント
逆フローの場合と同様に、display: masonry のバージョンを列から行に変更すると、masonry-direction の値が変更されます。グリッド バージョンでは、grid-template-columns プロパティと grid-template-rows プロパティの値を切り替える必要があります。省略形を使用している場合は、構文の順序を変更します。
どちらの切り替えフローのサンプルでも、display: masonry バージョンの方が直感的です。フロー masonry-direction を制御するプロパティは 1 つあり、次のいずれかの値をとります。
rowcolumnrow-reversecolumn-reverse
次に、デフォルトの自動値が必要な値ではないと想定して、masonry-template-tracks に必要なサイズ情報（任意）を追加します。
グリッドで反対方向にするには、grid-auto-flow プロパティを使用する必要があります。行のモザイク表示を行うには、grid-template-* プロパティの値を切り替えます。また、現在のグリッド構文では、グリッド軸の値を未定義のままにすることはできません。masonry の値がない軸には、常に grid-template-* プロパティを指定する必要があります。
アイテムを配置する
どちらのバージョンでも、グリッド レイアウトでよく知られている行ベースの配置を使用して、アイテムを明示的に配置できます。どちらのバージョンでも、アイテムを配置できるのはグリッド軸（事前定義されたトラックがある軸）のみです。マサリ レイアウトを実行している軸にアイテムを配置することはできません。
display: masonry でログイン
次の CSS は、4 つの列を持つマサリ レイアウトを定義します。したがって、グリッド軸は列です。クラスが a のアイテムは、最初の列の行から 3 番目の列の行に配置され、新しい masonry-track-* プロパティで 2 つのトラックにまたがっています。これは masonry-track: 1 / 3; の省略形として定義することもできます。
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
display: grid でログイン
次の CSS は、4 つの列を持つマサリ レイアウトを定義します。したがって、グリッド軸は列です。クラスが a のアイテムは、最初の列の行から 3 番目の列の行に配置され、grid-column-* プロパティで 2 つのトラックにまたがっています。これは grid-column: 1 / 3; の省略形として定義することもできます。
グリッド軸が列の場合、grid-row-* プロパティは無視され、グリッド軸が行の場合、grid-columns-* プロパティは無視されます。
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
名前付き行は、どちらの構文でも使用できます。次の例は、a という名前の 2 つの列線を持つグリッドを示しています。
display: masonry でログイン
名前付きの行は、masonry-template-tracks のトラックのリストの値で定義されます。この項目は、a という名前の行の後に配置できます。
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
display: grid でログイン
名前付きの行は、grid-template-columns のトラックのリストの値で定義されます。アイテムは、a という名前の最初の行の後に配置されます。grid-row プロパティが定義されている場合、そのプロパティは無視されます。
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
名前付き領域は、どちらの構文でも使用できます。次の例は、「a」、「b」、「c」という名前の 3 つのトラックを含むグリッドを示しています。
display: masonry でログイン
トラックの名前は masonry-template-areas の値になります。トラックサイズが定義されていないため、3 つすべてがデフォルトで auto サイズになります。アイテムは「a」トラックに配置されます。
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
これは、行を定義する場合も列を定義する場合も同じです。唯一の違いは masonry-direction プロパティです。
display: grid でログイン
列の場合、構文は基本的に同じです。同様に、トラックサイズが定義されていないため、3 つすべてがデフォルトで auto サイズになりますが、他の軸がマサリであることを明示的に指定する必要があります。
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
ただし、行の場合は、grid-template-areas は実際には 2 次元の領域を定義し、各行は個別の文字列として記述されるため、値を別様に記述する必要があります。
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
2 つのオプションの比較ポイント
どの配置でも、方向を切り替える場合は display: masonry 構文の方が適しています。masonry-track-* プロパティはグリッド軸の方向に応じて機能するため、方向を変更するには masonry-direction の値を変更するだけです。グリッド バージョンでは、切り替えを有効にするために、少なくとも冗長なプロパティが必要です。ただし、グリッド バージョンで方向の変更が複雑になるその他の方法については、前述の例をご覧ください。
ショートカット
この投稿では、使用されているプロパティを明確にするために長い形式を使用していますが、display: masonry バージョンと display: grid バージョンの両方を省略形で定義できます。
display: masonry でログイン
display: masonry ショートカットは masonry キーワードを使用します。基本的なマサモリ レイアウトを作成するには、次の CSS を使用します。
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
単純な行ベースのマサリレイアウトを作成するには:
.masonry {
display: masonry;
masonry: row;
}
ショートカットを使用してトラックと行ベースのレイアウトを定義するには:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
display: grid でログイン
grid ショートカットを使用して基本的なマサリ レイアウトを作成します。
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
単純な行ベースのマサリレイアウトを作成するには:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
より複雑な例では、display:masonry の全体的な構文がシンプルであるため、過度に複雑になることなく、より多くのプロパティを省略形にまとめることができます。
たとえば、「a」、「b」、「c」という 3 つの列を作成し、下から上に入力したとします。
display:masonry でログイン
display: masonry では、これらの 3 つをすべて省略形で設定できます。
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
サイズは自動的に設定されるため、指定する必要はありませんが、特定のサイズを指定することもできます。例: masonry: column-reverse 50px 100px 200px "a b c";。
また、各コンポーネントは自由に並べ替えることができます。覚えておく必要のある特定の順序はありません。代わりに行を処理する場合は、column-reverse を row または row-reverse に置き換えるだけで、残りの構文は同じです。
display: grid でログイン
display: grid では、次の 3 つの要素を個別に設定する必要があります。
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
マサモの例と同様に、これによりすべての列のサイズが auto になりますが、明示的なサイズを指定する場合は、次のようにします。
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
または、[grid] を使用してサイズとエリア名をすべて設定する場合は、次のようにします。
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
どちらの例でも、順序は厳密に必要であり、行が必要な場合は異なります。たとえば、行に変更すると、次のように表示されます。
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
または、すべてを 1 つのショートカットにまとめることもできます。
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
2 つのオプションの比較ポイント
display: masonry ショートカットは比較的簡単なショートカットであるため、広く使用される可能性があります。多くの場合、「標準」のモザイク レイアウトでは、トラック定義のみを設定します。他のすべての値はデフォルトのままにできます。
display: grid バージョンでは、既存の grid ショートカットが使用されます。これはかなり複雑なショートカットであり、Google の経験上、デベロッパーがあまり使用していません。上記の例に示すように、単純なマサナリー レイアウトで使用する場合でも、値の順序を設定する場合は注意が必要です。
その他の考慮事項
この記事では、現在一般的なユースケースをいくつか取り上げますが、グリッドやマサリが今後どのようになるかについてはわかりません。別の display: masonry 構文を使用する主な理由は、将来的に 2 つを分離できることです。特に初期値（masonry-template-tracks など）については、グリッドとは異なるマサジにすると便利な場合があります。display: grid バージョンを使用する場合、グリッドのデフォルトを変更することはできません。これにより、将来の機能が制限される可能性があります。
これらの例では、マサリを使用する場合に、グリッドで有効なプロパティをブラウザが無視する必要がある場所を確認できます。たとえば grid-template-areas は、2 次元のグリッド レイアウトを定義するため、ほとんどの値が破棄されます。マサリでは、1 つの方向のみを完全に定義します。
フィードバックを送信する
これらの例と、各バージョンを並べて示したドラフト仕様をご覧ください。Issue 9041 にコメントを投稿してご意見をお聞かせください。または、ご自身のブログやソーシャル メディアに投稿する場合は、X または LinkedIn でぜひお知らせください。