Grid template areas in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding grid-template-areas layout

Given the following CSS grid template areas, how many grid cells does the area named header cover?

CSS

grid-template-areas: "header header header" "nav main main" "nav footer footer";

A 4

B 1

C 2

D 3

💡 Hint

Count how many times the name 'header' appears in the grid-template-areas string.

The 'header' area appears three times in the first row, so it covers 3 grid cells horizontally.

📝 Syntax

intermediate

Identify the syntax error in grid-template-areas

Which option contains a syntax error in the grid-template-areas property?

A grid-template-areas: "header header" "nav main footer";

B grid-template-areas: "header header" "nav main" "footer footer";

C grid-template-areas: 'header header' 'nav main';

D grid-template-areas: "header header" "nav main";

💡 Hint

Ensure all row strings have the same number of space-separated area names.

Option A is invalid because the first row has 2 area names ("header header") while the second has 3 ("nav main footer"). All rows in grid-template-areas must have the same number of space-separated area names to define a rectangular grid.

❓ rendering

advanced

Visual layout from grid-template-areas

What will be the visual layout of the grid areas if the CSS is:

grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 50px 100px;
grid-template-areas:
  "a a b"
  "c d d";

Which area will be the widest?

A Area 'a' is the widest because it spans two columns, including the 2fr column.

B Area 'b' is the widest because it is in the last column with 1fr width.

C Area 'd' is the widest because it spans two columns but both are 1fr wide.

D Area 'c' is the widest because it occupies the entire first column.

💡 Hint

Look at how many columns each area covers and their relative widths.

Area 'a' spans the first two columns: 1fr + 2fr = 3fr total width, which is wider than any other area.

❓ selector

advanced

Selecting grid areas with CSS selectors

Given this HTML and CSS, which selector correctly styles the grid area named 'sidebar'?

CSS

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

.container {
  display: grid;
  grid-template-areas: "header header"
                       "sidebar content";
}
.sidebar {
  /* Which selector targets this grid area? */
}

A .sidebar { grid-area: header; }

B .container > .sidebar { grid-area: content; }

C .sidebar { grid-area: sidebar; }

D .content { grid-area: sidebar; }

💡 Hint

The grid-area property assigns the grid area name to the element.

The element with class 'sidebar' should have grid-area: sidebar; to match the grid-template-areas name.

❓ accessibility

expert

Accessibility considerations with grid-template-areas

When using grid-template-areas for layout, which practice best supports screen reader users?

A Rely only on visual grid layout without adding landmarks or roles.

B Use semantic HTML elements and ARIA roles to describe the purpose of each grid area.

C Use only <div> elements with no ARIA attributes inside the grid.

D Hide all grid areas from screen readers using <code>aria-hidden="true"</code>.

💡 Hint

Think about how screen readers understand page structure beyond visual layout.

Using semantic HTML and ARIA roles helps screen readers understand the layout and purpose of each area, improving accessibility.