SASS - Grids HW
OCS Grid Grammar
The finished OCS Grids lesson hacks are below. Click Run on each labeled UI runner to preview the layout. The OCS grid classes come from the portfolio’s SASS.
Popcorn Hack 1: Refactor the Beakers
All three beakers share one standard OCS grid, and each beaker is an ocs__grid-cell.
Challenge
Popcorn Hack 1 — Three OCS Beakers
Popcorn Hack 2: Size the Control Beaker
Four fr values create four columns in one row, and the final 2fr makes the Control Beaker twice as wide as any other column. The lesson explicitly allows a grid-template-columns style for this fr hack.
Challenge
Popcorn Hack 2 — Control Beaker Twice as Wide
MCQ Check
- A —
cols-4adds four columns to a standard OCS grid. - B — Two boxes; the first is twice as wide.
2fr 1frgives two columns in a 2:1 ratio. - C —
ocs__grid-cell--headeris the cell that spans the full grid row. - D —
<div class="my-row" style="display:flex">breaks the lesson’s OCS-only class rule.
MCQ Grids: 4/4 | answers: A,B,C,D
Homework Hack: Temperature Trial and Calculator
Click Run to check the editable code and preview both grids. The runner reports PASS or FIX for each lesson rule. The temperature title is a header cell spanning the standard grid, Beaker 3 is accented as the outlier, and the calculator’s Avg key is accented.
Challenge
Homework Hack — Temperature and Calculator Grids with Live Checks