CSS Grid Layoutの時代がやってくる。［その2］

前回は、CSS Grid Layoutを利用したGrid itemの配置の指定など、基本的な使い方を調べましたが、さらにGridエリアを設定してレイアウトする方法と、より実践的に利用する方法を調べてみました。 Grid itemの配置を指定する 前回、基本的なGrid lineの番号で指定することで、グリッドを定義する方法で、要素をレイアウトしました。 その他にも、エリアを設定し、名前を付けて指定する方法があります。 エリアを設定し、名前を付けて指定する ナビゲーションのhtmlを用意します。 grid-template-areasでエリアを作り、エリア名を付けます。エリア名は自由に決める事ができます。 ul { display: grid; grid-template-areas: "nav1 nav2 nav3 nav4"; } Nav1 Nav2 Nav3 Nav4 ダブルクオーテー