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 SASS in the portfolio.

Popcorn Hack 1: Refactor the Beakers

One standard OCS grid holds all three beakers. Every beaker uses ocs__grid-cell.

Trial A: 21.8°C

Trial B: 22.1°C

Trial C: 22.6°C

Popcorn Hack 2: Size the Control Sample

Four fr values place four beakers in one row; the last 2fr gives the Control Sample twice the width of any other beaker. This lesson explicitly allows a grid-template-columns style for the fr hack.

Sample 1

Sample 2

Sample 3

Control Sample

MCQ Check

1. A — cols-4 adds four columns to a standard OCS grid.
2. B — Two boxes; the first is twice as wide. 2fr 1fr makes two columns with a 2:1 width ratio.
3. C — ocs__grid-cell--header spans the full grid row.
4. D — <div class="my-row" style="display:flex"> breaks the lesson’s OCS 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 shows PASS or FIX for each lesson rule. The temperature title spans the standard grid, Sample 3 is accented as the outlier, and the calculator’s Avg key is accented.