CSS网格错误(使用网格填充)

Question

我使用来自https://github.com/FremyCompany/css-grid-polyfill的CSS网格多边形填充

我尝试使用以下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>

但我得到了以下错误：

无效声明:网格-列/行: attr(stryle) /attr(样式)(无效令牌)

而这个：

无效声明:网格-模板-行/列:attr(样式)(无法识别的轨道宽度)

要说的是，我在聚合物组件中使用网格！

Answer 1

看起来您没有为grid-template-columns和grid-template-rows提供足够的值，所以从技术上讲，您只有一个列和一行。在定义grid-templates时，您需要为绘制的每一行提供一个值，该值定义网格(photoshop中的思考规则)。目前，您只传递两个属性，200px和300px。网格将其解释为：

• 第1行:左边沿200。
• 第2行:第1行的300。

(代码的可视化示例)

因为在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现在将放在现在存在的第二列中。

(更新代码的可视化示例)

另外，我不建议将position: absolute;与CSS规范相结合(它覆盖了Grid提供的所有功能)。