固定列と列位置を使用したグリッド自動レイアウトの混合

Question

CSS グリッドを含む次の HTML があります

リーリー リーリー

重要な部分は、.main-item がグリッド内で固定の 位置 を持っているということです。

ここで、25 個の セルをグリッドに追加します。

リーリー

問題は、これらの要素が .main-item の位置を無視するようにしたいことです (存在しないものとして扱います)。ただし、CSS はこれを修正し、要素が .main-item の周りを流れるようにします。次の二次的な動作が必要です:

JavaScript で style.gridRow と style.gridColumn を設定することでこれを修正できました

リーリー

JS 内の他のすべての要素を設定せずにこれを行う方法はありますか?固定要素がフロー修正に影響しないようにするための CSS はありますか?

コードペンリンク

Answer 1

グリッドに相対位置を指定したり、特定のグリッド項目を絶対位置に指定したりできます。

リーリー リーリー リーリー