3列の中央にCSSグリッドがあり、右側に1ピクセルのマージンがあります

Question

私はCSSグリッド仕様でいくつかのテストを行っていますが、私の最初のテストで問題が発生しています。私は、3列の中心グリッドを作成し、グリッド内のdivを列の幅を埋めるようにしたいと考えました。これは動作しますが、私は右を参照してください。1pxのマージンを期待していなかった。

.wrapper { 
 
    max-width: 400px; 
 
    margin: 0 auto; 
 
    background-color: red; 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr 1fr; 
 
} 
 

 
.cell { 
 
    background-color: grey; 
 
}

<div class="wrapper"> 
 
    <div class="grid"> 
 
    <div class="cell">a</div> 
 
    <div class="cell">b</div> 
 
    <div class="cell">c</div> 
 
    </div> 
 
</div>

私は、これは割合丸めの問題に関係しています期待しています。ブラウザを拡大縮小すると、余白が消えることがあります。

フレックスボックスでこれを修正して細胞を成長させることができますが、私はむしろcss-gridでこれを処理する方法を知っています。

Answer 1

これは数学であり、修正できませんでした。たとえば、あなたは100 3に分けた場合、あなたは、あなたが

grid-template-columns: repeat(3, 1fr); 

代わりの

grid-template-columns: 1fr, 1fr, 1fr; 

使用することができところで33.33333333333333のようなもの..........

を取得します