Как разделить div (сетку) на ячейки?

Question

Я использую библиотеку реагирования-сетки-макета , поэтому я хочу нарисовать отдельные линии для моей сетки. Я пробовал 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%, 100%, 0.144)",
                    // backgroundImage: "linear-gradient(90deg, transparent 49.02%, black 0%, black 50%, transparent 50%, transparent 99.02%, black 0%, 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, w: 1, h: 2 }} style={{
                    backgroundColor: "red",
                    borderWidth: 1
                }}>b</div>
                <div key="c" data-grid={{ x: 4, y: 0, w: 1, h: 1 }} style={{
                    backgroundColor: "red",
                    borderWidth: 1
                }}>c</div>
            </ReactGridLayout>

PS Сетка будет в квадрате.