CSSグリッド：グリッドギャップにカラーを適用できますか？

Question

CSSグリッドモジュール内のグリッド線またはグリッドギャップの幅以上のスタイルを設定する方法はありますか？私はドキュメントでそれについて何も見つけることができませんが、多くのデザインでグリッドラインが色づけされる傾向があると考える傾向があります。回避策はありませんか？

Answer 1

悲しいことに、現在、CSSグリッドの仕様では、grid-gapをスタイルする方法はありません。私はちょうどhtmlとCSSにかかわらず、うまく動作する解決策を考え出しました。show border grid lines only between elements

Answer 2

たとえば、5×5グリッドの四角形がある場合、25個の要素でグリッドを塗りつぶし、同じ要素に罫線を適用する唯一の方法はありますか？ 、

あなたはそれを行うことができますが、グリッドの境界線は、その表の罫線がborder-collapseプロパティで、グリッドのギャップとは異なり、彼らは内側のボーダーと一緒にあなたのグリッドの境界線に適用されますができ、同じように崩壊しませんそれは望ましくない可能性があります。さらに、grid-gap宣言がある場合は、border-collapse: separateと同じようにグリッド項目の境界線が区切られ、表の境界線が表示されます。

grid-gapは、グリッド項目をスペーシングするための慣習的なアプローチですが、グリッドギャップはそれだけであるため、理想的ではありません。そのために、これらのギャップを彩る唯一の方法は、グリッドコンテナに背景色を適用することです。

Answer 3

グリップの代わりに境界線を使うことも、背景色を変更することもできます。

.yourDiv { 
    border-right: 5px solid rgb(110, 0, 210); 
    border-top: 10px solid rbg(255, 255, 0); 
} 

希望します。