Problem description

Create a layout with:

• Parent grid areas: header, content, aside, and footer.

• Inside .content, a subgrid splits into two columns, a title section and a list of cards.

Breakpoints include the following:

• Mobile (< 640px): Single-column parent grid; subgrid also in single column

• Tablet (640px–1023px): Parent grid in two columns (content 2fr, aside 1fr); subgrid in two columns

• Desktop (≥ 1024px): Parent grid in three columns (aside 1fr, content 3fr, and extra column reserved); subgrid displaying three columns for cards

Goal

Write CSS rules employing display: subgrid for the child layout, defining responsive behavior at three breakpoints, and ensuring alignment of titles and cards across nested grid lines.

Constraints

• Use CSS Grid and subgrid only.

• Define two breakpoints, 640px and 1024px.

• Set the parent grid gap to 16px and the subgrid gap to 8px.

• Do not use JavaScript.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.