我目前使用純css渲染我的網(wǎng)格線，點(diǎn)擊此鏈接查看我的codesandbox。但是這并不準(zhǔn)確，因?yàn)檫@個(gè)網(wǎng)格是以像素而不是網(wǎng)格單位來呈現(xiàn)。

我的css

.container {
  background-color: red;
  width: 1000px;
  height: 3000px;
  background-image: repeating-linear-gradient(#ccc 0 1px, transparent 1px 100%),
    repeating-linear-gradient(90deg, #ccc 0 1px, transparent 1px 100%);
  background-size: 50px 50px;
}

.react-grid-layout {
  background: none !important;
}

有沒有辦法渲染網(wǎng)格線，這樣當(dāng)我的網(wǎng)格項(xiàng)目被渲染時(shí)，它會(huì)準(zhǔn)確地反映出來。

例如，如果我定義了w:2，h:4，x:0，y:0，那么我的網(wǎng)格項(xiàng)將非常合適。

下圖顯示我已經(jīng)導(dǎo)入了我的style.css

我知道這個(gè)問題很老了，但它讓我想到了背景圖片。

感謝我給你的問題留下我的答案。 如下調(diào)整背景尺寸參數(shù)。

.gridContainer {
  background-image: ...;
  /** 
  * - 10px -> grid spacing  (px)
  * - 12 -> number of cols  (grid unit).
  * - 75px -> row height    (px)
  */
  background-size: calc(((100% - 10px) / 12)) 75px;
}

這就是結(jié)果，網(wǎng)格非常適合我。

我看了你提供的codesandbox。 您忘記了在index.js中導(dǎo)入css文件。 添加這一行在index.js中添加導(dǎo)入部分的結(jié)尾

import './styles.css';