没有内容的CSS网格边框

Question

有没有简单的方法向没有内容的CSS网格添加边框？假设我制作了一个3行4行的网格：

CSS

    .container {
  display: grid;
  grid-template-rows: 200px 200px 200px;
  grid-template-columns: 25% 25% 25% 25%;
}

HTML

    <div class="container">
    </div>

我将如何可视化整个网格的布局，而不必用全部带有边框的子容器填充它？谢谢。

Answer 1

转到网页，打开开发人员工具，在检查器选项卡中，进入布局部分，然后应显示您应用了display: grid的div，只需选中它前面的框，您就可以请参阅页面上的网格布局

参考此：https://ibb.co/pf8mSyv

Answer 2

赋予高度属性

height: 50px;

或类似的东西。