CSS グリッドを使用した一貫性のないギャップ

Question

CSS グリッドを使用する HTML ドキュメントがあります:

リーリー

しかし、行と列のギャップを 1px に設定しても、依然として次の結果が得られます:

ご覧のとおり、最初の列のギャップと行のギャップは 2 ピクセル幅です。行と列の数を増やすと、パターンが繰り返されます。私が何を間違えたのでしょうか？ありがとう！

Answer 1

次のことを試してください

＃＃＃交換する：＃＃＃ リーリー

は

に置き換えられます。 リーリー 必要なのは

gap:1px だけです。

ただし、.grid1 の幅と高さを設定する必要もあります。例:

リーリー

幅と高さがわからない場合は、単に

width:auto; height:auto;

に設定し、グリッド内のコンテンツによって幅と高さを決定させます。