SASS Grids HW
Goal
Use the OCS grid grammar to organize lab readings and a keypad. Each grid has one variant, and every direct child has ocs__grid-cell. The homework markup uses no custom classes, CSS, or inline styles; only Popcorn 2 uses the lesson’s allowed fr experiment.
Popcorn Hack 1: Fix the Beaker Row
The three beakers now use one standard grid and three cells. The inline flex layout and box class are removed. On a wide screen there are three equal columns; the shared small-screen rule reduces the standard grid to two columns.
Challenge
Popcorn Hack 1: Fix the Beaker Row
Popcorn Hack 2: Size the Beakers with fr
I used 1fr 1fr 1fr 2fr: four track values create four columns. The Control Beaker receives two of the five shares of available track space, while each other beaker receives one. Gaps are separate from these shares. This inline style is used only for the permitted fraction experiment; it deliberately keeps all four columns in one row.
Challenge
Popcorn Hack 2: Size the Beakers with fr
Homework Hack: Temperature Trial and Keypad
Grid 1 uses the standard variant for readings. Its header spans the full row, and Beaker 3 is accented because 31.6 °C is the outlier. Grid 2 uses the calculator variant for four square keypad cells, with Avg accented. The keypad demonstrates layout only; averaging behavior is outside this task. Press Run to render the grids and recompute the PASS/FIX checklist after edits.
Challenge
Homework Hack: Temperature Trial and Keypad
MCQ
Question 1: A — cols-4 adds four columns to a standard grid. The calculator class selects a different variant, --wide changes one cell’s span, and 4fr describes one track rather than four.
MCQ Grids: pending — only question 1 was included in the supplied lesson text. Questions 2–4 and a genuine score line still need to be completed in the lesson’s quiz.
Validation and reflection
Structural checks confirm three cells in Popcorn 1, four fraction values in Popcorn 2, and two homework grids with the required header and accent cells. The runner’s checklist checks the homework markup on every run. Browser rendering and the lesson MCQ submission remain pending.
This checkout does not contain the lesson’s full OCS grid definitions. These examples rely on the shared lesson styles being available; no site stylesheets are modified for this homework. The student markup contains no custom CSS.
A variant describes the whole layout, while a cell modifier describes an individual item’s role. This makes the outlier and title clear without writing individual widths. Choosing the variant first also makes it easier to explain why the readings use rows and the keypad uses square cells.
Submission notes
Lesson: OCS Grid Grammar (SASS Grids)
MCQ Grids: pending questions 2–4 and quiz result
Popcorn 1: three beakers refactored to ocs__grid — yes
Popcorn 2: fr values used = 1fr 1fr 1fr 2fr
Homework: structural checks pass; run the browser checklist and confirm rendered layout before submission.