Question

我使用https://github.com/FremyCompany/css-grid-polyfill

中的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>

但我收到以下错误：

声明无效：网格列/行：attr（stryle）/ attr（样式）（无效令牌）

和这一个：

INVALID DECLARATION：grid-template-rows / columns：attr（style）（无法识别的trackth宽度）

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

Answer 1

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

第1行：距左边缘200px。
第2行：第1行300px。

（visual example of your code）

由于grid-template-column/row中只定义了两个网格线，因此只存在一个“网格区域”，即第1行和第2行之间的空间。因此，按钮上的CSS正在查找{{1} }，它不存在，导致Grid失败。

为了解决这个问题，您需要为列和行定义更多行。更新模板以包含零距离列/行，如下所示：

grid-column/row-2

这将绘制三条网格线，创建两个网格区域。您按钮上的grid-template-columns: 0px 200px 300px; grid-template-rows: 0px 200px 400px; CSS现在将其放在第二列中，该列现在已存在。

（visual example of updated code）

作为补充说明，我不建议将grid-column: 2;与CSS Grid Spec结合使用（它会覆盖所有功能网格提供）。

CSS网格错误（使用网格Polyfill）

1 个答案: