CSS グリッド テンプレート列 - 新しい行で単一列を避ける

Question

CSS グリッドを使用して列のサイズを変更し、列が収まらない場合は新しい行に移動します。すべてを説明するコードは次のとおりです:

リーリー リーリー

リーリー

ここで、私が避けたいのは、1 つの (単一) 列だけを新しい行に移動することです。代わりに、先に折りたたんで 2 つの列を一緒に移動します。

より直観的に説明すると、次のようにしても問題ありません:

█ █ █ ███ ＃＃＃また：＃＃＃

█ █ ███

██

＃＃＃また：＃＃＃

██

██

＃＃＃これは受け入れがたい：＃＃＃

█ █ ███

█

ここでは不必要なメディア クエリを避けたいと考えています。 これは私のコードです: https://jsfiddle.net/tucado/0czokyxa/3/

Answer 1

同じ問題に遭遇した人がいる場合、解決策は次のとおりです: https://jsfiddle.net/tucado/0czokyxa/5/

リーリー

と CSS:

リーリー

ありがとう@Temani-Afif