グリッド領域のCSSルールがクロムで機能しない

Question

grid-areaルールの理由で「不明なプロパティ」と表示されている理由を理解しようとしています。 sidebarに設定しようとすると、私は "不明なプロパティ"をchrome開発ツールに入れます。

クロムための任意の回避策？これはFirefoxで正常に動作します。

Answer 1

ebarがクラスまたは#であれば、それは同上

であれば、上記のエラーのために、私の推測では、あなたがebar前にドットを忘れてしまったことをここにコードがありますされ、あなたが知っているgrid-template-areas内だけで独自の値に を置き換えます要素のすべての出現はあなたがそれと遊ぶことができる矩形を塗りつぶします、要素の全体のレイアウトが長方形である唯一の規則でも、あなたは "L"の形にすることはできません

私はあなたが知っていると信じていますスペースの分布を特にfrでどのように使用してサイドバーにかかる部分を変更するのですか？

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

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

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