Grid column generator with loops in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this SASS loop?

Given the following SASS code, what CSS rule will be generated for .col-3?

SASS

@for $i from 1 through 4 {
  .col-#{$i} {
    grid-column: span $i;
  }
}

A .col-3 { grid-column: span 4; }

B .col-3 { grid-column: 3; }

C .col-3 { grid-column: span 3; }

D .col-3 { grid-column: span $i; }

💡 Hint

Look at how the loop variable $i is used inside the selector and property.

The loop runs from 1 to 4, creating classes .col-1 to .col-4. For .col-3, the grid-column property is set to 'span 3'.

🧠 Conceptual

intermediate

How many CSS classes are generated by this SASS code?

Consider this SASS code snippet:

@for $col from 1 through 6 {
  .grid-col-#{$col} {
    grid-column: span $col;
  }
}

How many CSS classes will be generated?

A 6

B 5

C 7

D 4

💡 Hint

The loop runs from 1 through 6 inclusive.

The loop runs from 1 to 6, so it generates 6 classes: .grid-col-1 to .grid-col-6.

❓ selector

advanced

Which option correctly generates grid columns with a gap using SASS loops?

You want to create grid column classes with a gap of 1rem between columns. Which SASS code snippet correctly applies the gap only between columns, not after the last column?

A

@for $i from 1 through 4 {
  .col-#{$i} {
    grid-column: span $i;
    margin-right: 1rem;
  }
}

B

@for $i from 1 through 4 {
  .col-#{$i} {
    grid-column: span $i;
    margin-right: 1rem;
  }
  .col-4 {
    margin-right: 0;
  }
}

C

@for $i from 1 through 4 {
  .col-#{$i} {
    grid-column: span $i;
  }
  .col-#{$i}:last-child {
    margin-right: 0;
  }
}

D

@for $i from 1 through 4 {
  .col-#{$i}:not(:last-child) {
    margin-right: 1rem;
  }
  .col-#{$i} {
    grid-column: span $i;
  }
}

💡 Hint

Think about how to remove margin from the last column only.

Option D applies margin-right: 1rem to .col-#{$i}:not(:last-child) for each i, ensuring the gap only between columns and no margin after the last column regardless of its class.

❓ rendering

advanced

What visual layout results from this CSS grid with generated columns?

Given this CSS generated by SASS:

.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

If you place three divs with classes col-1, col-2, and col-3 inside .grid-container, how will they be arranged?

A The first div takes 1 column, second takes 2 columns, third takes 3 columns, causing the third to wrap to next row.

B All divs fit in one row because grid-template-columns allows infinite columns.

C The divs overlap because grid-column spans exceed total columns.

D The divs stack vertically ignoring grid-column spans.

💡 Hint

Remember the container has 4 equal columns and spans add up to more than 4.

The container has 4 columns. The first div spans 1 column, second spans 2 columns (total 3), the third spans 3 columns which doesn't fit in remaining 1 column space, so it wraps to next row.

❓ accessibility

expert

Which approach improves accessibility when generating grid columns with SASS loops?

You generate grid column classes with SASS loops for a responsive layout. Which option best improves accessibility for keyboard users and screen readers?

A Add <code>tabindex="0"</code> to all grid items so they are focusable.

B Use semantic HTML elements inside grid items and add <code>aria-label</code> describing content.

C Add <code>role="grid"</code> to container and <code>role="gridcell"</code> to each grid item.

D Use only <code>div</code> elements with no ARIA roles or labels for simplicity.

💡 Hint

Think about semantic meaning and meaningful labels for assistive technologies.

Using semantic HTML and meaningful ARIA labels helps screen readers understand content. Adding tabindex to all items can cause confusing tab stops. Roles should match actual grid semantics only if appropriate.