CSS Gridで名前付きエリアを使ってレイアウトを定義するプロパティはどれですか？

解説

正解は「grid-template-areas」です。grid-template-areasは、CSS Gridの各領域に名前を付け、その名前を並べることでレイアウト全体の配置を定義するプロパティです。名前を並べてレイアウトを表現できますたとえば、ヘッダー・メインコンテンツ・サイドバーを配置する場合は、次のように記述できます。.container { display: grid; grid-template-areas: "header header" "main sidebar"; /* 名前の並びで配置を定義 */ } 文字列の1行がGridの1行に対応し、同じ名前を横に並べると、そのエリアが複数のセルにまたがります。レイアウトの形をコード上で視覚的に把握しやすいのが特徴です。grid-areaは各要素をエリアに割り当てます「grid-area」も名前付きエリアに関係するため混同しやすいですが、役割が異なります。grid-template-areasがレイアウト全体のエリア構成を定義するのに対し、grid-areaは個々の要素を指定した名前のエリアへ配置するために使えます。.header { grid-area: header; /* headerエリアへ配置 */ } columnsとrowsは行や列のサイズを定義します「grid-template-columns」は列の幅、「grid-template-rows」は行の高さを定義するプロパティです。grid-template-columns: 1fr 200px;：2列の幅を定義します。grid-template-rows: 80px 1fr;：2行の高さを定義します。名前付きエリアそのものを定義するプロパティではありません。名前付きエリアを使うときは、grid-template-areasで全体の配置を作り、grid-areaで各要素を対応するエリアへ割り当てる、という役割の違いを押さえておくと理解しやすいです。参考https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Grids