SASS Grids: Homework Notebook

Lesson: OCS Grid Grammar (SASS Grids) Contents: Popcorn Hacks 1-2, MCQ result, Homework Hack (two grids built only with OCS classes), submission notes.

Popcorn Hack 1: Fix the Beaker Row

Replaced the inline style and the made-up box class with one ocs__grid, one ocs__grid--standard variant, and an ocs__grid-cell on each of the three beakers.

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

Popcorn Hack 2: Size the Beakers with fr

Four boxes in one row means four fr values. The Control Beaker is last and should be twice as wide as each of the others, so the values are 1fr 1fr 1fr 2fr.

fr values used: 1fr 1fr 1fr 2fr

Beaker 1
Beaker 2
Beaker 3
Control Beaker

MCQ Check

# Question My answer Why
1 Make a standard grid show 4 boxes per row A (cols-4) Same as 1fr 1fr 1fr 1fr.
2 grid-template-columns: 2fr 1fr B (2 boxes, first twice as wide) Two values = two boxes; 2 of 3 shares vs. 1 of 3.
3 Cell type that stretches across the whole row C (ocs__grid-cell--header) --header spans every column; --wide only spans 2.
4 Line that breaks the rule D (class="my-row" style="display:flex") Made-up class plus an inline style.
Temperature Trial (°C)
Beaker 1: 22.4
Beaker 2: 22.9
Beaker 3: 31.6
7
8
9
Avg

Homework Hack

Fixed both grids using only OCS classes:

  • Grid 1: ocs__grid ocs__grid--standard. The title is a --header cell and Beaker 3 (the outlier at 31.6) is an --accent cell.
  • Grid 2: ocs__grid ocs__grid--calculator, a keypad. The Avg key is an --accent cell.
  • Every box is an ocs__grid-cell, and there are no style attributes and no made-up classes (my-row, title-box, sample-card, highlight, key, orange are all gone).

Checklist result (the lesson’s PASS / FIX rules, applied to my markup)

PASS  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 cells)
PASS  Title is a header cell
PASS  Has accent cells (outlier beaker and Avg key)   (2 accent cells)

Submission Notes (paste into the description box)

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)