grid-template-areas …… 名前付きグリッド領域を指定する

grid-template-areasプロパティは、名前付きグリッド領域を指定する際に使用します。

■値

■初期値・適用対象・値の継承

■使用例

#sample1 {
	display: grid;
	width: 100%;
	grid-template-areas: "ue ue"
	                     "hidari migi"
	                     "shita shita";
	grid-template-rows: 80px 1fr 50px;
	grid-template-columns: 100px 1fr;
}

#sample1 > header {grid-area:ue; background-color:orange;}
#sample1 > nav    {grid-area:hidari; background-color:skyblue;}
#sample1 > main   {grid-area:migi; background-color:palegreen;}
#sample1 > footer {grid-area:shita; background-color:pink;}

<section id="sample1">
<header>上</header>
<nav>右</nav>
<main>左</main>
<footer>下</footer>
</section>

Sponsors