先日のFirefox52に続き、ChromeでもCSS Grid Layoutへの対応が行われました!!
Chromeでも↓こんな風に拡張フラグなどの設定なしで利用できるようになっています。
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Holy Grail Layout</title><styletype="text/css">*{box-sizing: border-box; }.wrapper{display: grid; width: 100%; height: 100%; grid-template-columns: 150px3fr 1fr; grid-template-rows: auto1fr auto; padding: 10px; }.box{background-color: #444; color: #fff; border-radius: 5px; border: 2pxsolidblack; padding: 20px; }.header{/*↓grid-areaで書く場合はこんな感じ*//*grid-area: 1/1/2/4;*/grid-row: 1; grid-column: 1 / span 3; }.left{/*grid-area: 2/1/3/2;*/grid-row: 2; grid-column: 1; }.content{overflow: auto; /*grid-area: 2/2/3/3;*/grid-row: 2; grid-column: 2; }.right{/*grid-area: 2/3/3/4;*/grid-row: 2; grid-column: 3; }.footer{/*grid-area: 3/1/4/4;*/grid-row: 3; grid-column: 1 / span 3; }</style></head><body><divclass="wrapper"><divclass="box header">header</div><divclass="box left">left</div><divclass="box content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati debitis nemo excepturi voluptatibus magnam fugit officia, ut, dicta, animi inventore quidem aliquam adipisci vitae perspiciatis id autem maiores asperiores dolores!</div><divclass="box right">right</div><divclass="box footer">footer</div></div></body></html>
Chromeでの対応が行われたので、Electronも近いうちのアップデートで、このCSS Grid Layoutがデフォルトで使えるようになると思います。
Electronの方のアップデートも今から楽しみですね!!