网格区域css规则不适用于chrome

Question

试图弄明白为什么它为我设置的grid-area规则说“未知属性”。尝试将其设置为sidebar，我在chrome dev工具中获得了“未知属性”。

铬的任何解决方法？这在Firefox中运行良好。

Answer 1

对于上述错误，我的猜测是，如果ebar是一个类，则会在ebar之前忘记一个点;如果是一个Id，则会忘记#

这里是代码，只替换您自己的值 在grid-template-areas内你知道一个元素的每个外观都填充了一个你可以用它来玩的矩形，这个元素的整个布局也是一个矩形的唯一规则就是你不能像一个＆＃34; L＆ ＃34;形状

我相信您知道如何使用空间分布，特别是使用fr来更改侧边栏所需的部分。

＆＃13;

＆＃13;

    .sidebar{
    	grid-area:sidebar;
      background:aqua;

    }
    .grid_container{
    	display:grid;
    	grid-template-columns: 1fr 3fr;
      grid-template-rows: 1fr 3fr;
    	grid-template-areas:
    	"sidebar ."
    	"sidebar .";
      background:pink;
      height:300px;
    }

＆＃13;

    <div class="grid_container">
      <div class="sidebar">side bar here</div>
      other content here
    </div>   

＆＃13;

＆＃13;

＆＃13;