Why custom grids offer control in SASS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use custom grids in CSS layouts?

Which of the following best explains why custom grids give developers more control in layout design?

A They remove the need for media queries in responsive design.

B They automatically adjust content without any developer input.

C They allow precise placement of elements in rows and columns beyond fixed frameworks.

D They restrict layouts to only two columns for simplicity.

💡 Hint

Think about how grids let you decide exactly where each box goes.

Custom grids let developers define exact rows and columns, controlling element placement precisely. This flexibility is not possible with fixed frameworks or automatic layouts.

📝 Syntax

intermediate

Sass grid mixin for custom columns

What is the output CSS of this Sass mixin usage?

@mixin grid-columns($count) {
  display: grid;
  grid-template-columns: repeat($count, 1fr);
}

.container {
  @include grid-columns(3);
}

A .container { display: grid; grid-template-columns: repeat(3, 1fr); }

B .container { display: flex; grid-template-columns: repeat(3, 1fr); }

C .container { display: grid; grid-template-columns: 3fr; }

D .container { display: grid; grid-template-columns: repeat(1fr, 3); }

💡 Hint

Check how the repeat function is used in CSS grid.

The mixin sets display: grid and uses repeat($count, 1fr) to create equal columns. Option A matches the correct CSS output.

❓ selector

advanced

Targeting grid items with Sass nesting

Given this Sass code, what CSS selector is generated for the nested .item?

.grid {
  display: grid;
  & > .item {
    padding: 1rem;
  }
}

A .grid > .item { padding: 1rem; }

B .grid .item { padding: 1rem; }

C .item > .grid { padding: 1rem; }

D .grid.item { padding: 1rem; }

💡 Hint

The & symbol represents the parent selector in Sass.

The & > .item means direct child .item of .grid. So the selector is .grid > .item.

❓ layout

advanced

Effect of custom grid gaps in layout

What visual effect does setting grid-gap: 2rem; have on a CSS grid container?

A It adds 2rem padding inside each grid item.

B It removes spacing between grid items.

C It sets the grid container's margin to 2rem.

D It adds 2rem space between all rows and columns inside the grid.

💡 Hint

Think about spacing between boxes in a grid.

The grid-gap property adds space between rows and columns inside the grid container, separating the grid items visually.

❓ accessibility

expert

Accessibility considerations for custom grid layouts

Which practice improves accessibility when using custom CSS grids for page layout?

A Rely only on visual grid placement without adjusting tab order.

B Use semantic HTML elements and ensure keyboard navigation order matches visual grid order.

C Use only <div> elements with no ARIA roles for grid items.

D Disable keyboard navigation to prevent confusion.

💡 Hint

Think about how screen readers and keyboard users experience the page.

Using semantic HTML and matching keyboard navigation order to the visual grid ensures all users can understand and navigate the layout effectively.