How do you define and assign named grid areas?

How do you define and assign named grid areas?

• A. Named grid areas are defined solely by grid-template-columns and grid-template-rows.
• B. Named grid areas are defined using grid-template-areas with strings of names, and items are assigned via grid-area: name.
• C. Named grid areas are defined by giving each item a position with top and left values.
• D. Named grid areas require absolute positioning.

Answer: (B)

Named grid areas come from the grid container using grid-template-areas. You define the layout with strings, where each string is a row and each word in the string is a named area in that row. If the same name appears across adjacent cells, that area spans across those columns or rows. A dot can be used to indicate an empty cell. The actual sizes of the tracks come from grid-template-columns and grid-template-rows, while grid-template-areas just labels those tracks with meaningful names. To place items, you assign them to one of those named areas with grid-area: name. That single property tells the item to occupy the entire area labeled by that name, matching the rows and columns defined in grid-template-areas. The area can span multiple rows or columns if the name repeats across multiple cells in the grid template. So you’d set up something like grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; and then give items grid-area: header, grid-area: content, grid-area: sidebar, and grid-area: footer. This is the clean, semantic way to define and assign named areas without resorting to top/left positioning or absolute positioning.

Named grid areas come from the grid container using grid-template-areas. You define the layout with strings, where each string is a row and each word in the string is a named area in that row. If the same name appears across adjacent cells, that area spans across those columns or rows. A dot can be used to indicate an empty cell. The actual sizes of the tracks come from grid-template-columns and grid-template-rows, while grid-template-areas just labels those tracks with meaningful names.

To place items, you assign them to one of those named areas with grid-area: name. That single property tells the item to occupy the entire area labeled by that name, matching the rows and columns defined in grid-template-areas. The area can span multiple rows or columns if the name repeats across multiple cells in the grid template.

So you’d set up something like grid-template-areas: "header header header" "sidebar content content" "footer footer footer"; and then give items grid-area: header, grid-area: content, grid-area: sidebar, and grid-area: footer. This is the clean, semantic way to define and assign named areas without resorting to top/left positioning or absolute positioning.