Which declaration demonstrates the use of named grid areas to assign semantic regions in a 3-row grid layout?

Which declaration demonstrates the use of named grid areas to assign semantic regions in a 3-row grid layout?

• A. grid-template-columns: header header;
• B. grid-template-areas: "header header" "nav main" "footer footer";
• C. display: grid
• D. grid-auto-rows: 100px

Answer: (B)

The main idea is using named grid areas with CSS Grid. The grid-template-areas property lets you draw a map of your layout where each string represents a row and each word is a named region. In this declaration, you create three rows: the first row has two cells both named header, so the header spans across two columns. The second row defines two regions, nav and main, side by side. The third row has footer spanning both columns. This naming lets you assign elements to these regions with grid-area: header; grid-area: nav; grid-area: main; grid-area: footer;, giving semantic, readable placement for each part of the page. Other declarations shown don’t establish named areas: one sets column sizes, one just enables grid layout, and one sets row height—none of these create the semantic mapping of regions the way grid-template-areas does.

The main idea is using named grid areas with CSS Grid. The grid-template-areas property lets you draw a map of your layout where each string represents a row and each word is a named region. In this declaration, you create three rows: the first row has two cells both named header, so the header spans across two columns. The second row defines two regions, nav and main, side by side. The third row has footer spanning both columns. This naming lets you assign elements to these regions with grid-area: header; grid-area: nav; grid-area: main; grid-area: footer;, giving semantic, readable placement for each part of the page. Other declarations shown don’t establish named areas: one sets column sizes, one just enables grid layout, and one sets row height—none of these create the semantic mapping of regions the way grid-template-areas does.