我正在使用react-grid-layout library，所以我想为网格绘制单独的线。我已经尝试过repeating-linear-gradient，但由于此操作，行距出现了不必要的偏移。
我的网格：

let rowCount = 6;
let colCount = 6;
let ratio = 50;
...
<ReactGridLayout
                compactType={null}
                autoSize={false}
                preventCollision={true}
                useCSSTransforms
                // onDragStop={() => {
                //     console.log("drag");
                // }}
                // onResize={() => {
                //     console.log("resize");
                // }}
                // onLayoutChange={(current,all) => {
                //     console.dir(current);
                //     console.dir(all);
                // }}
                // onBreakpointChange={() => {
                //     console.log("breakpoint changed");
                // }}
                isResizable={false}
                style={{
                    width: colCount * ratio,height: rowCount * ratio,backgroundColor: "rgba(100%,100%,0.144)",// backgroundImage: "linear-gradient(90deg,transparent 49.02%,black 0%,black 50%,transparent 50%,transparent 99.02%,black 100%)",// background: `repeating-linear-gradient(90deg,transparent,transparent ${ratio}px,black 50px,black 51px)`,backgroundSize: 100

                }}
                maxRows={rowCount}
                // rowHeight={0}
                margin={[0,0]}
                breakpoints={{ lg: 0 }}
                cols={{ lg: colCount }}
            >
                <div key="a" data-grid={{ x: 0,y: 0,w: 1,h: 1 }}
                    style={{
                        backgroundColor: "red",borderWidth: 1
                    }}
                >a</div>
                <div key="b" data-grid={{ x: 1,y: 2,h: 2 }} style={{
                    backgroundColor: "red",borderWidth: 1
                }}>b</div>
                <div key="c" data-grid={{ x: 4,h: 1 }} style={{
                    backgroundColor: "red",borderWidth: 1
                }}>c</div>
            </ReactGridLayout>

P.S。网格将被平方。