CSS柵格誤差（用網格填充工具）

Question

我使用的CSS網格填充工具從https://github.com/FremyCompany/css-grid-polyfill

我嘗試使用下面的HTML

<div style="display: grid; grid-template-columns: 200px 300px; grid-template-rows: 200px 400px; position: absolute; width: 500px; height: 600px; left: 90px; top: 122px"> 
    <button style="position: absolute; width: 134px; height: 51px; grid-column: 2; grid-row: 1; left: 21px; top: 34px" horizontal-alignment="Left" vertical-alignment="Top">Button</button> 
    <button style="position: absolute; width: 134px; height: 51px; grid-column: 2; grid-row: 2; left: 134px; top: 303px" horizontal-alignment="Left" vertical-alignment="Top">Button</button> 
</div> 

，但我得到了以下錯誤：

聲明無效：grid-column/row：attr（stryle）/ attr（style）（invalid token）

and this one：

無效聲明：grid-template-rows/columns：attr（style）（無法識別的磁道寬度）

要說，我使用聚合物組件中的網格！

Answer 1

看起來你沒有提供足夠的值給grid-template-columns和grid-template-rows，所以在技術上你只有一列和一行。在定義grid-templates時，您需要爲繪製的每一行提供一個值，它定義了網格（請參考Photoshop中的規則）。目前，您只傳遞兩個屬性，200px和300px。網格將其解釋爲：

• 第1行：距離左邊200px。
• 第2行：從300像素行1

（visual example of your code）

由於只有兩個格子線是在你grid-template-column/row，只有一個「格狀區」的存在，所述空間限定在兩者之間1行和第2行。因此，您的按鈕上的CSS正在尋找grid-column/row-2，它不存在，導致網格失敗。

爲了解決這個問題，你需要定義列和行更多的線路。更新你的模板，包括像這樣的零距離行/列：

grid-template-columns: 0px 200px 300px; 
grid-template-rows: 0px 200px 400px; 

這將引起三條格線，創建兩個網格區域。您的按鈕上的grid-column: 2; CSS現在將它放在現在存在的第二列中。

（visual example of updated code）

作爲一個額外的說明，我會不建議用CSS電網規格（它覆蓋所有功能 是Grid提供）相結合position: absolute;。