グリッドの枠線を格子状に引きたいとする。CSS グリッドレイアウト の例では、要素間に隙間（gap）を設けて、各要素の枠線（border）をひいていた。この隙間をなくしてみると、以下の表のように枠線が重なるところの太さが２倍になってしまい。見栄えが良くない。

次の表は、すべての枠線が太さの1ピクセルの線できれいに描かれている。 これは、グリッドに展開された各要素の枠線が、隣接する要素の枠線と重ならないように、グリッドの位置により border属性を変えているからである。

CSS定義

HTML定義

次の表は、上に示した表と CSSの使い方は全く同じである。ただし、それぞれのプロパティの枠線を太くして色を変え（solid）、また要素同士の間隔（gap）を開けてみた。これにより、要素がどの位置でどのような枠線をひいているか一目で分かるであろう。

HTML定義

CSS定義