問題タブ [css-grid]

CSS グリッドは初めてで、このレイアウトでページを作成しようとしています:

私が抱えている問題は.main、コンテナー グリッド内のクラスとグリッドです。

のグリッドの設定が間違っていると思います.main。

上部のコンテナ.containerでは、3 列のレイアウトが機能していることがわかります。

最初の行では、div 画像 div が 3 列のうち 2 列にまたがり、blogart div が 1 列を占めるようにします。

2 行目には、それぞれ 1 列にまたがる 3 つの blogart div が必要です。

しかし、内側のグリッド.mainでは、すべてのマークアップが 4 番目の列にあります。

コードペンをセットアップしました。どんな提案にも最適です。

これは私のマークアップです。css は codepen にあります。

-ありがとう

フッター行がコンテンツ行と重ならないようにするにはどうすればよいですか?

これは私が得ているものです:

CSS Grid layoutのみを使用して、JS を使用せずにサイズ変更可能なペインを実装したいと思います。これは可能ですか？

たとえば、CodePen のエディターには、HTML / CSS / JS エディター用のサイズ変更可能なペインがあります。また、プレーンな JS で実装する以下の例を参照してください (CodePen の例に URL を追加できないようです。そのため、帰属を追加するのは少し難しいです。コードはhttp://codepen.io/によるものです)。 gsound/ )。

'mousemove'PS、補足として、イベントを追加および削除して上記の例を再実装しましたが、ブール値を使用してイベントリスナーを常に保持する'mouseup'よりも「優れている」(よりパフォーマンスが高い)かどうか疑問に思っていました...isResizing

https://codepen.io/dye/pen/LyRJym

このレイアウトでは、グリッド レイアウトの 2 つのセクションの間に一種の仕切りが必要です。どちらのセクションのアイテム数も不明であり、動的です。これについて最善の方法は何ですか？最初の列行で開始し、最後の列行で終了する仕切りを追加しました。しかし、最後の行を選択する方法がわかりません。

現在、私は

これは、ブラウザーが 4 列を表示するサイズになっている場合に見栄えがします。しかし、ブラウザのサイズを変更して列数を増減すると、レイアウトが崩れます。常に最後の列行を選択するにはどうすればよいですか? または、仕切りを使用しないでこれを達成するためのより良い方法はありますか?

*注: 以前のアプローチでは、セクションごとに 1 つずつ、合計 2 つのグリッド コンテナーを使用していました。ただし、レイアウトの動的な性質のため、両方のセクションの列が必ずしも整列するとは限りません。理想的には、たとえば、あるセクションに項目が 1 つしかなく、他のセクションには多くの項目がある場合でも、列を一致させたいと考えています。

ありがとう！