https://codepen.io/dye/pen/LyRJym
このレイアウトでは、グリッド レイアウトの 2 つのセクションの間に一種の仕切りが必要です。どちらのセクションのアイテム数も不明であり、動的です。これについて最善の方法は何ですか？最初の列行で開始し、最後の列行で終了する仕切りを追加しました。しかし、最後の行を選択する方法がわかりません。
現在、私は
.grid-item--divider {
grid-column: 1 / 5;
}
これは、ブラウザーが 4 列を表示するサイズになっている場合に見栄えがします。しかし、ブラウザのサイズを変更して列数を増減すると、レイアウトが崩れます。常に最後の列行を選択するにはどうすればよいですか? または、仕切りを使用しないでこれを達成するためのより良い方法はありますか?
*注: 以前のアプローチでは、セクションごとに 1 つずつ、合計 2 つのグリッド コンテナーを使用していました。ただし、レイアウトの動的な性質のため、両方のセクションの列が必ずしも整列するとは限りません。理想的には、たとえば、あるセクションに項目が 1 つしかなく、他のセクションには多くの項目がある場合でも、列を一致させたいと考えています。
ありがとう！