CSS Gridを活用して新しいレイアウトを学ぶ【基本編】

CSS Gridは多くの人々の協力で開発されています。CSS Gridの基本を掴もうと時間を費していますが、その動作を見ると、これまで抱えていた苦痛を解決してくれるだけでなく、より優れたサイトを簡潔に制作する手助けになってくれそうです。

これからCSS Gridを使う上での疑問や問題について答えていこうと思います。今回はこれまで作っていたレイアウトがCSS Gridを活用することでどのように変わるのかを見ていきましょう。

 
ここに示したコードは、私たちがサイトのAboutページで実際に使っているグリッドです。長年ずっと使い続けている人も多いであろう黄金パターンなのですが、nth-childフロートをクリアする作業はやはり苦痛です。

同様のことをCSS Gridで再現するとどうなるか見てみましょう。

これはCodepenで使っているコードです。CSS Gridの使用にはブラウザが対応している必要があります。Chrome CanaryやFirefox Nightlyのほか、ChromeやFirefoxのフラグ設定を変更して有効化することもできます。最初に示した古いパターンと比べてみれば、grid-template-columnsを変えるだけでいろんな変更が簡単に行えます。わくわくしてきますね。

さらにコンテンツの移動もこれまでよりずっと簡単に行うことができ、スペースに合わせて自動的に調整してくれるようにもなりました。エリアごとに名前をつけてグリッドを定義することまでできてしまいます。可能性はまだまだ広がっており、これはほんの一部でしかありません。

ただしアクセシビリティとコンテンツの見え方には少し注意が必要で、特にキーボードでのナビゲーションはきちんと確認しておかなくてはなりません。

CSS Gridの根本を理解すればもっと優れたレイアウトの構築が簡単にできるでしょう。CSS Gridはみなさんにとっても簡単で使いやすい技術だと確信しています。

※本稿は 「CSS Grid: Learning new layout」を翻訳・再編集したものです。