【CSS】シンプルなグリッドレイアウト、主にgrid-template-areasについて

2017年12月12日2019年6月12日CSS,グリッドレイアウト

Microsoft edgeがWindows 10 Fall Creators Updateからベンダープレフィックスなしのグリッドレイアウトに対応しましたね

edge用に記述するベンダープレフィックスがきつすぎたのと、そもそもグリッドレイアウトを記述する便利な「grid-template-areas」がベンダープレフィックスを使っても未対応というのを知ってそっとエディタを閉じた記憶

今回の対応を知り、グリッドレイアウトに再挑戦しています

いや、素晴らしい
まだまだ分からない事も多いけど素晴らしいですよね

flexbox（display:flex）も良いですが、やっぱり要素が増えてくると混乱する

grid layout（display: grid）は、まずHTMLも入れ子を抑えつつのっぺり書ける
ページレイアウトなら

<div id ="container">
<div id ="header" class="item">header</div>
<div id ="menu" class="item">menu</div>
<div id ="main" class="item">main</div>
<div id ="side" class="item">side</div>
<div id ="footer" class="item">footer</div>
</div>

で、2カラムでページをレイアウトするCSSは

#container {
  width: 100vw;
  min-height:100vh;
  display: grid;
  grid-template-columns: 1fr 350px;
  grid-template-rows: 150px 50px 1fr 150px;
  grid-gap: 5px;
  grid-template-areas:
    "header header"
    "menu   menu"
    "main   side"
    "footer footer";
}

#header {grid-area: header;}
#menu {grid-area: menu;}
#main {grid-area: main;}
#sub {grid-area: side;}
#footer {grid-area: footer;}

最近作ったデモとコードページ

あぁ、やっぱり「grid-template-areas」は良いですね
子要素にキーを振るだけで視覚的というか直感的に記述することができます

grid-template-columns
横のレイアウト構造

grid-template-rows
縦のレイアウト構造

1frについて
1frと記述するとほかの構造の固定幅分を引いて余りの幅から自動的に可変幅として最大値となる
複数記述可能で複数時は等分される

grid-gap
アイテムの隙間、marginみたいなもの
これに合わせて自動調節してくれる

grid-template-areas
grid-template-columnsとgrid-template-rowsで設定した構造のポジションに入れる要素を要素キーで記述
「grid-template-columns: 1fr 1fr 1fr;」としてあれば横が3列になり一段目は「"header header header"」となる
「"header header header"」の様に同一キーでの並びの記述は1枠となり指定している複数の幅は吸収される