Question

我想在CSS中使用新的网格模块，但它无法正常工作。

这是我的代码：

div {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

p {
  grid-column-start: 2;
  grid-row-start: 2;
}

<div>
  <p>
    Hello World! :D
  </p>
</div>

Answer 1

它工作正常，您只需要更好地可视化即可。尝试将其他一些子元素添加到您的主容器中，您会发现Hello world位于应放置的位置。只是因为周围到处都是空白，所以遇到了困难

div.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  background: green;
}

div {
  background: yellow;
  padding: 10px;
  background-clip: content-box;
}

p {
  grid-column-start: 2;
  grid-row-start: 2;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <p>
    Hello World! :D
  </p>
</div>

Answer 2

任何专业都不支持grid-columns属性   浏览器。

来源 - w3schools

那么为什么你需要使用它，没有意义。

css3显示：网格;或grid-column-start：无效

2 个答案: