どうも！LSSです！！
Webレイアウトについてぼーっと考えていると、ふと思いついた形がありました。
…思いついたのはいいのですが、その形に何のメリットがあるかというと「…。」^^;
よくあるレイアウト
こういう形のレイアウト、よくありますね。
聖杯レイアウト、と呼ばれたりもするようです。
３×３で組んだグリッドレイアウトの、上段と下段を横方向にぶち抜いた形ですね。
メインコンテンツの幅が狭くなる分、視線移動が少なくなる、サイドバーに機能や情報を盛り込んで利便性を上げる、などのメリットがあります^^
コード
<style>
.grd0{
display:grid;
grid-template:1fr 5fr 1fr/1fr 5fr 1fr;
}
#head0{grid-column:1/4;grid-row:1/2;border:1px solid black;}
#sidel0{grid-column:1/2;grid-row:2/3;border:1px solid black;}
#main{grid-column:2/3;grid-row:2/3;border:1px solid black;}
#sider0{grid-column:3/4;grid-row:2/3;border:1px solid black;}
#foot0{grid-column:1/4;grid-row:3/4;border:1px solid black;}
</style>
<div class="grd0">
<div id="head0">へっだ</div>
<div id="sidel0">左サイド</div>
<div id="main0">めいんこんてんつ</div>
<div id="sider0">右サイド</div>
<div id="foot0">ふった</div>
</div>
卍レイアウト
３×３の格子状のグリッドレイアウト、どこをどうぶち抜くかの自由が利くので、こんな「卍レイアウト」も同様に実現可能ですｗ
コード
<style>
.grd1{
display:grid;
grid-template:1fr 5fr 1fr/1fr 5fr 1fr;
}
#head1{grid-column:1/3;grid-row:1/2;border:1px solid black;}
#sidel1{grid-column:1/2;grid-row:2/4;border:1px solid black;}
#main1{grid-column:2/3;grid-row:2/3;border:1px solid black;}
#sider1{grid-column:3/4;grid-row:1/3;border:1px solid black;}
#foot1{grid-column:2/4;grid-row:3/4;border:1px solid black;}
</style>
<div class="grd1">
<div id="head1">へっだ</div>
<div id="sidel1">左サイド</div>
<div id="main1">めいんこんてんつ</div>
<div id="sider1">右サイド</div>
<div id="foot1">ふった</div>
</div>
実現可能、なのはいいですが、聖杯レイアウトに比べて…バランスが崩れただけじゃない？感が否めません^^;;;
メイン以外の各パーツが２枠づつ占有する事による平等な感じはありますが、これを納得がいくUIに持っていけるかは…甚だ疑問ですｗ
それとも…不安定である事を活かした使い方があったりするのかな？
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
