おぉ～!!
Edgeでも、-ms-のベンダープレフィックスが付いた昔の仕様ではなく、CSS Grid Layout Module Level1のグリッドレイアウトが使えるようになってます。
これで、現在の主要なブラウザは一通り対応した感じでしょうか。
https://caniuse.com/#feat=css-grid
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Holy Grail Layout</title><style type="text/css"> * { box-sizing: border-box; } .wrapper { display: grid; width: 100%; height: 100%; grid-template-columns: 150px 3fr 1fr; grid-template-rows: auto 1fr auto; padding: 10px; } .box { background-color: #444; color: #fff; border-radius: 5px; border: 2px solid black; 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><div class="wrapper"><div class="box header">header</div><div class="box left">left</div><div class="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><div class="box right">right</div><div class="box footer">footer</div></div></body></html>
ただ、なんだかんだで、IE11はまだ若干シェア残っているので、Webサイトで使う場合はその辺の対応は必要かもしれません。
IE11やWin10FCUより前のEdgeに対応する場合は、↓の記事などが参考になりそうです。 qiita.com
ChromeやFirefoxは基本的に最新バージョンに更新されている環境が多いのでいいとして、
IE11やEdge15以前のバージョンも-ms-プレフィックスを使って、古い仕様のGrid Layoutを使うことである程度は対処できます。
ただ、古めのSafariはちょっと対処が難しいですね。
ここを妥協できれば、CSS Grid Layoutの利用を考えるのも結構アリな時代になってきたのかな、、、とか思います。