はてなブログの新しいテーマを（現実逃避的に）作ってて、いい機会だからとCSS Gridについて少し調べてみました。人に解説できるほどではないのでここでまとめたりはしないですけど。
INDEX
はてなのテーマにどう使うか
自分でhtmlを組んでるならまぁもっと自由度はありますが、はてなブログの決まったhtmlの中でどう使えるのか。とりあえずトップページのhtmlを簡略化して概要を掴んでみます。（普通にテーマ作る時よくやるんですけど、すぐに忘れる）
<body class="page-index"> <div id="container"> <div id="container-inner"> <header id="blog-title" data-brand="hatenablog"></header> <div id="top-editarea"></div> <div id="content"> <div id="content-inner"> <div id="wrapper"> <div id="main"> <div id="main-inner"> <article class="entry"> <div class="entry-inner"> <header class="entry-header"> <div class="entry-date"></div> <h1 class="entry-title"></h1> <div class="entry-categories"> </div> </header> <div class="entry-content"></div> <footer class="entry-footer"> <div class="customized-footer"></div> <div class="comment-box"></div> </footer> </div> </article> <div class="pager"></div> </div><!-- #main-inner --> </div><!-- #main --> <aside id="box1"> <div id="box1-inner"></div> </aside> </div><!-- #wrapper --> <aside id="box2"> <div id="box2-inner"> <div class="hatena-module"> <div class="hatena-module-title"></div> <div class="hatena-module-body"></div> </div> </div><!-- #box2-inner --> </aside><!-- #box2 --> </div><!-- #content-inner --> </div><!-- #content --> </div><!-- #container-inner --> </div><!-- #container --> <footer id="footer"> <div id="footer-inner"></div> </footer> </body>
CSS Gridは、理解したところで簡単に言うと「親ブロックで縦横どういった分割のグリッドか決めて、小ブロックはそれぞれそのグリッドのどこに入るか決める」というもの。なので違う親ブロックを持つものとは一緒に扱えない。
というわけで、トップページの大きな括りで言えば…
- 「#container-inner」を親とする「#blog-title」「#top-editarea」「#content」を並び替える（タイトルの横に自由エリアを持ってきたり、タイトルよりも上に自由エリアを持ってきたり）
- 「content-inner」を親とする「wrapper」と「box2」を並び替えてメインエリアとサイドバーの位置関係を調整する
- 「entry-header」を親とする「entry-date」「entry-title」「entry-categories」を並び替える
といったことかなぁ。
flexboxとcss gridでできることは似ているけど違う。どういうときにどちらを使ったほうがいいのか、そのあたりはもう少し慣れないとな。とりあえず実験的にでもどんどん使ってみよう。
