SASS Grids: Solved Runners

Every runner from the lesson, solved with OCS grid classes. The two fr demos keep the one inline grid-template-columns the lesson allows.

Tech Talk: Change the fr

Two beakers at 2fr 1fr: the first is twice as wide.

View example code 
<div class="ocs__grid ocs__grid--standard" style="grid-template-columns: 2fr 1fr;">
  <div class="ocs__grid-cell">Beaker 1</div>
  <div class="ocs__grid-cell">Beaker 2</div>
</div>
Beaker 1
Beaker 2

Grid Variants

Standard grid with header, accent, muted, and wide cells.

View example code 
<div class="ocs__card">
  <div class="ocs__grid ocs__grid--standard">
    <div class="ocs__grid-cell ocs__grid-cell--header">Trial 1: pH Readings</div>
    <div class="ocs__grid-cell">Beaker 1: 7.1</div>
    <div class="ocs__grid-cell ocs__grid-cell--accent">Beaker 2: 4.2</div>
    <div class="ocs__grid-cell ocs__grid-cell--muted">Control Beaker: 7.0</div>
    <div class="ocs__grid-cell ocs__grid-cell--wide">Lab Notes: Beaker 2 had extra acid added.</div>
  </div>
</div>
Trial 1: pH Readings
Beaker 1: 7.1
Beaker 2: 4.2
Control Beaker: 7.0
Lab Notes: Beaker 2 had extra acid added.

Example A: Standard Grid

Added a fourth beaker; it wraps to a second row.

View example code 
<div class="ocs__grid ocs__grid--standard">
  <div class="ocs__grid-cell">Beaker 1</div>
  <div class="ocs__grid-cell">Beaker 2</div>
  <div class="ocs__grid-cell">Beaker 3</div>
  <div class="ocs__grid-cell">Beaker 4</div>
</div>
Beaker 1
Beaker 2
Beaker 3
Beaker 4

Example B: Cell Types

Moved the accent to Beaker 2.

View example code 
<div class="ocs__grid ocs__grid--standard cols-4">
  <div class="ocs__grid-cell ocs__grid-cell--header">Trial 1: pH of Test Beakers</div>
  <div class="ocs__grid-cell">Beaker 1: 7.1</div>
  <div class="ocs__grid-cell ocs__grid-cell--accent">Beaker 2: 6.9</div>
  <div class="ocs__grid-cell ocs__grid-cell--muted">Control Beaker: 7.0</div>
  <div class="ocs__grid-cell">Beaker 3: 4.2</div>
</div>
Trial 1: pH of Test Beakers
Beaker 1: 7.1
Beaker 2: 6.9
Control Beaker: 7.0
Beaker 3: 4.2

Example C: Full Card

Added the Conclusion cell.

View example code 
<div class="ocs__card">
  <h3 class="ocs__section-title">Lab Report Summary</h3>
  <div class="ocs__grid ocs__grid--card">
    <div class="ocs__grid-cell">
      <h3>Hypothesis</h3>
      <p class="ocs__card-description">Adding acid will lower the pH in each test beaker.</p>
    </div>
    <div class="ocs__grid-cell">
      <h3>Results</h3>
      <p class="ocs__card-description">Beaker 3 dropped to 4.2, well below the control beaker.</p>
    </div>
    <div class="ocs__grid-cell">
      <h3>Conclusion</h3>
      <p class="ocs__card-description">The acid lowered the pH, so the hypothesis was supported.</p>
    </div>
  </div>
</div>

Lab Report Summary

Hypothesis

Adding acid will lower the pH in each test beaker.

Results

Beaker 3 dropped to 4.2, well below the control beaker.

Conclusion

The acid lowered the pH, so the hypothesis was supported.

Popcorn Hack 1: Fix the Beaker Row

Three ocs__grid-cell boxes, no style, no box class.

View example code 
<div class="ocs__grid ocs__grid--standard">
  <div class="ocs__grid-cell">Beaker A: Water</div>
  <div class="ocs__grid-cell">Beaker B: Salt Water</div>
  <div class="ocs__grid-cell">Beaker C: Vinegar</div>
</div>
Beaker A: Water
Beaker B: Salt Water
Beaker C: Vinegar

Popcorn Hack 2: Size with fr

1fr 1fr 1fr 2fr keeps four in one row and makes the Control Beaker twice as wide.

View example code 
<div class="ocs__grid ocs__grid--standard" style="grid-template-columns: 1fr 1fr 1fr 2fr;">
  <div class="ocs__grid-cell">Beaker 1</div>
  <div class="ocs__grid-cell">Beaker 2</div>
  <div class="ocs__grid-cell">Beaker 3</div>
  <div class="ocs__grid-cell">Control Beaker</div>
</div>
Beaker 1
Beaker 2
Beaker 3
Control Beaker

MCQ

View example code 
<div class="ocs__grid ocs__grid--standard">
  <div class="ocs__grid-cell ocs__grid-cell--header">Temperature Trial (°C)</div>
  <div class="ocs__grid-cell">Beaker 1: 22.4</div>
  <div class="ocs__grid-cell">Beaker 2: 22.9</div>
  <div class="ocs__grid-cell ocs__grid-cell--accent">Beaker 3: 31.6</div>
</div>

<div class="ocs__grid ocs__grid--calculator">
  <div class="ocs__grid-cell">7</div>
  <div class="ocs__grid-cell">8</div>
  <div class="ocs__grid-cell">9</div>
  <div class="ocs__grid-cell ocs__grid-cell--accent">Avg</div>
</div>
Temperature Trial (°C)
Beaker 1: 22.4
Beaker 2: 22.9
Beaker 3: 31.6
7
8
9
Avg

Homework Hack

Both grids fixed; the lesson checklist passes every line.

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)