OCS Grids Grammar

Use OCS grid and cell classes in each CodeRunner. Run each cell to see the result.

Grid example

This example shows header, accent, muted, and wide cell types.

Grid example - Show OCS grid cell types

Lines: 1 Characters: 0

UI Output

Replace the inline style and made-up box class with one standard OCS grid and three grid cells.

Popcorn Hack 1 - Replace made-up classes with OCS grid classes

Lines: 1 Characters: 0

UI Output

Put four beakers in one row. Give the Control Beaker twice the width of each other beaker using four fr values.

Popcorn Hack 2 - Set purposeful fr column sizes

Lines: 1 Characters: 0

UI Output

Build the standard temperature grid and calculator grid. Keep the checklist in the runner and run it until all lines pass.

Homework - Build a standard grid and calculator grid

Lines: 1 Characters: 0

UI Output

A, B, C, D