OCS Grid Grammar

Source lesson: sass/grids

Submission notes

  • Lesson: OCS Grid Grammar (SASS Grids)
  • MCQ Grids: 4/4 answers: A,B,C,D
  • Popcorn 1: three beakers refactored to ocs__grid (yes)
  • Popcorn 2: fr values used = 1fr 1fr 1fr 2fr
  • Homework: every check shows PASS (yes)

Popcorn Hack 1: Fix the Beaker Row

The starter used style="display: flex;" and a made-up box class. It’s now one ocs__grid, one standard variant, and an ocs__grid-cell per beaker. No style attribute or box class is left.

Beaker A: Water
Beaker B: Salt Water
Beaker C: Vinegar
Beaker A: Water
Beaker B: Salt Water
Beaker C: Vinegar

Popcorn Hack 2: Size the Beakers with fr

All 4 beakers in one row means 4 fr values. The Control Beaker is last and twice as wide, so it gets 2fr and the others get 1fr. That’s 5 shares in total, so each beaker gets 1/5 of the row and the Control Beaker gets 2/5. This is the one hack where a style is allowed.

Beaker 1
Beaker 2
Beaker 3
Control Beaker
Beaker 1
Beaker 2
Beaker 3
Control Beaker

MCQ

**MCQ Grids: 4/4 answers: A,B,C,D**
  1. A standard grid with 4 boxes per row: what do you add? A cols-4. It’s the same as 1fr 1fr 1fr 1fr.
  2. grid-template-columns: 2fr 1fr? B 2 boxes, the first twice as wide. Two values means two boxes, and 3 shares split 2/3 and 1/3.
  3. Which cell type spans the whole row? C ocs__grid-cell--header. (--wide only spans 2 columns.)
  4. Which line breaks the rule? D <div class="my-row" style="display:flex">. It’s a made-up class plus an inline style.

Homework Hack

Grid 1 is a standard grid. The trial title is a --header cell (it spans the whole row) and Beaker 3 at 31.6 °C is the outlier, so it’s --accent. Grid 2 is a --calculator keypad, with the Avg key as --accent. Every box has ocs__grid-cell, and there are no style attributes or made-up classes (my-row, title-box, sample-card, highlight, key, orange are all gone).

Temperature Trial (°C)
Beaker 1: 22.4
Beaker 2: 22.9
Beaker 3: 31.6
7
8
9
Avg
Temperature Trial (°C)
Beaker 1: 22.4
Beaker 2: 22.9
Beaker 3: 31.6
7
8
9
Avg

Lesson checklist output (from running this markup through the homework runner’s checker):

Check Result
No inline style attributes PASS
No made up classes PASS
Has an ocs__grid root PASS
Uses the standard variant for Grid 1 PASS
Uses the calculator variant for Grid 2 PASS
Every box uses ocs__grid-cell (8 boxes) PASS
Title is a header cell PASS
Has accent cells (outlier beaker and Avg key) PASS

Why these choices fit the data: readings in rows → standard grid. A keypad of square buttons → calculator. The title has to label the whole trial, so it’s a header that spans the row. Accent is for whatever should stand out, which is the reading that’s 9 °C hotter than the others and the action key on the keypad.