公開日: 2024 年 9 月 19 日
CSS ワーキング グループでは、2 つの CSS 組積造の提案を 1 つのドラフト仕様。 攻撃グループは、 簡単に比較して、最終決定を下すことができます。Chrome 独立したメーソンリー構文を使用する方が、 して続行します。パフォーマンスに関する最大の問題については、 POST が解決されても、構文に関する懸念事項が残っている場合、 グリッドと組み合わされたバージョンでの学習の容易さなどについても学びました。
仮説を検証するために、いくつかの例を用いて、 どちらでもよいでしょうこの投稿の例をご覧ください。 今後の参考にさせていただきますので、ぜひフィードバックをお寄せください 説明します。
この投稿では考え得るすべてのユースケースを網羅しているわけではありませんが、
グリッドレイアウトから組積造を分離しても
説明します。実際、その逆が当てはまる場合もあります。この投稿で説明するように
display: masonry バージョンでは、新しい機会とシンプルな構文が生まれています。
さらに、多くのデベロッパーが、Google Compute Engine の
組積造品を並び替えることで、持ち運びに問題が生じている。これも
提案された reading-flow を通じて、両方のバージョンの構文に対応するようにする必要があります。
プロパティです。
基本的な組積造のレイアウト
組積造について考えるとき、多くの人が思い浮かべるのはこのレイアウトです。アイテム数 最初の行が配置された後、後続のアイテムは スペースになります。
<ph type="x-smartling-placeholder">
display: masonry でログイン
マサニ レイアウトを作成するには、display プロパティに masonry の値を使用します。これにより、自分で定義（または
内容によって定義されます）と組積造がもう一方の軸です。最初のアイテムは、
ブロックおよびインライン開始位置（英語の場合は左上）に表示されます。
インライン方向に並んでいます。
トラックを定義するには、masonry-template-tracks を使用し、トラック リスティングの値を指定します。
追加することをおすすめします
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
display: grid でログイン
メーソンリー レイアウトを作成するには、まず grid の値を使用してグリッド レイアウトを作成します。
display プロパティ。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)。このレイアウトでは、自動サイズ調整のトラックがいくつでも作成されます。
コンテナに収まるようにします。
組積造による逆の流れ
この仕様には、組積造の流れの方向を変更する方法が含まれています。対象 たとえば、フローをブロックエンドから順に変更できます。
<ph type="x-smartling-placeholder">
display: masonry でログイン
display: masonry を使用してメーソンリー レイアウトを作成し、masonry-direction を使用する
値は column-reverse にします。
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
display: grid でログイン
display: grid と grid-template-rows: masonry を使用してメーソンリー レイアウトを作成します。
次に、新しい値 row-reverse を指定して grid-auto-flow プロパティを使用し、
これにより、グリッド コンテナのブロック端からアイテムがレイアウトされます。
.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 に設定すると、
影響します。想定どおり、混乱を招く可能性があります。
異なるものになります。
列の組積造
向きを変更して行を定義することもできます。
<ph type="x-smartling-placeholder">
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 バージョン
より直感的に感じられます1 つのプロパティでフローを制御し
masonry-direction の場合、次のいずれかの値を取ります。
rowcolumnrow-reversecolumn-reverse
次に、必要なサイズ情報を masonry-template-tracks に追加します。
デフォルトの auto 値が必要ないと仮定します。
グリッドの場合、逆方向には grid-auto-flow を使用する必要があります。
行メーソンリーにするには、grid-template-* の値を
プロパティです。また、現在のグリッド構文では、
グリッドの軸が定義されていません。masonry の値がない軸には、常に grid-template-* プロパティを指定する必要があります。
アイテムを配置する
どちらのバージョンでも、行ベースの グリッド レイアウトから馴染みのある配置にすることをおすすめします。どちらのバージョンでも、 アイテムのみをグリッド軸に配置する。これは、事前定義された コンクリート レイアウトを行う軸にアイテムを配置することはできません。
display: masonry でログイン
次の CSS は、4 列のメーソンリー レイアウトを定義しています。グリッドの軸は、
表しますクラスが a のアイテムは最初の列から配置されます。
2 つのトラックにまたがっており、新しい
masonry-track-* プロパティ。また、これは単に
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 のアイテムは最初の列から配置されます。
grid-column-* の 2 つのトラックにまたがって、3 列目の行に接続されます。
プロパティです。これは 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;
}
どちらの構文でも名前付き行を使用できます。次の例は、BigQuery の
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 キーワードを使用します。基本的な Pod 構成を
組積造レイアウトでは次の 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 の経験上、AI チームが
開発できます。前の例に示すように、単純なファイアウォール ルールの
メーソンリー レイアウトでは、値の順序を設定するときに注意が必要です。
その他の考慮事項
この投稿では今日の一般的なユースケースを取り上げていますが、
未来がグリッドや組積造のために保たれるかもしれません。個別の
display: masonry 構文を使用すると、この 2 つが将来的に発散する可能性も高まります。イン
初期値（masonry-template-tracks の値など）を使用した場合、
石積みでグリッドとは違うことをするのに役立つかもしれません。わたしたちは
グリッドのデフォルトを変更する display: grid バージョンを使用すると、
将来の作業を制限することもできます
これらの例では、ブラウザが無視する必要がある場所を
組積造を使用する場合、グリッドで有効なプロパティを指定します。
たとえば、grid-template-areas では、ほとんどの値が
2 次元のグリッド レイアウトを定義するとします。組積造では、
一方向を完全に定義しています。
フィードバックの提供
これらの例と、それぞれを定義するドラフト仕様をご覧ください。 使用できます。コメント欄でぜひご意見をお聞かせください 問題 9041 ご自身のブログやソーシャル メディアに投稿する場合は、 X または LinkedIn.