align equal signs with subgrid

static/factoring.html

@@ -88,15 +88,26 @@
 
   .problems-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: 1fr 1fr;
     gap: 8px 40px;
+    align-items: start;
+  }
+
+  /* Each column defines the shared [num][lhs][=][rhs] tracks;
+     problems subgrid onto them so every "=" lines up in that column. */
+  .prob-col {
+    display: grid;
+    grid-template-columns: auto auto max-content 1fr;
+    column-gap: 6px;
+    row-gap: 8px;
+    align-content: start;
   }
 
   .problem {
     display: grid;
-    grid-template-columns: 22px 4.4em max-content auto;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
     align-items: baseline;
-    column-gap: 6px;
     font-size: 1.2rem;
     font-weight: 700;
     padding: 7px 4px;
@@ -219,36 +230,40 @@ function genUnique(n) {
   return out;
 }
 
+function probRow(idx, lhs, rhs) {
+  return `<div class="problem"><span class="prob-num">${idx}.</span>` +
+    `<span class="lhs">${lhs}</span><span>=</span>` +
+    `<span class="rhs">${rhs}</span></div>`;
+}
+
+// Split rows into two subgrid columns (left = first half, read top-to-bottom).
+function twoCols(rows) {
+  const half = Math.ceil(rows.length / 2);
+  return `<div class="prob-col">${rows.slice(0, half).join('')}</div>` +
+    `<div class="prob-col">${rows.slice(half).join('')}</div>`;
+}
+
 function renderProblems() {
+  const L = '<span class="answer-line"></span>';
+
   // Part I - Factor: given a + b, write the factored form
-  const partA = genUnique(PER_PART).map((t, i) =>
+  const rowsA = genUnique(PER_PART).map((t, i) =>
-    `<div class="problem"><span class="prob-num">${i+1}.</span>` +
+    probRow(i + 1, `${t.a} + ${t.b}`, `${L}(${L} + ${L})`));
-    `<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
-    `<span class="rhs"><span class="answer-line"></span>(<span class="answer-line"></span> + <span class="answer-line"></span>)</span>` +
-    `</div>`
-  ).join('');
 
   // Part II - Expand: given x(y + z), write the sum
-  const partB = genUnique(PER_PART).map((t, i) =>
+  const rowsB = genUnique(PER_PART).map((t, i) =>
-    `<div class="problem"><span class="prob-num">${i+1}.</span>` +
+    probRow(i + 1, `${t.x}(${t.y} + ${t.z})`, `${L} + ${L}`));
-    `<span class="lhs">${t.x}(${t.y} + ${t.z})</span><span>=</span>` +
-    `<span class="rhs"><span class="answer-line"></span> + <span class="answer-line"></span></span>` +
-    `</div>`
-  ).join('');
 
   // Part III - Find the common factor: fill the box
-  const partC = genUnique(PER_PART).map((t, i) =>
+  const rowsC = genUnique(PER_PART).map((t, i) =>
-    `<div class="problem"><span class="prob-num">${i+1}.</span>` +
+    probRow(i + 1, `${t.a} + ${t.b}`, `<span class="box-blank"></span>(${t.y} + ${t.z})`));
-    `<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
-    `<span class="rhs"><span class="box-blank"></span>(${t.y} + ${t.z})</span></div>`
-  ).join('');
 
   return `
-    <div class="section"><h1>Part I. Factor out the common factor.</h1><div class="problems-grid">${partA}</div></div>
+    <div class="section"><h1>Part I. Factor out the common factor.</h1><div class="problems-grid">${twoCols(rowsA)}</div></div>
     <hr class="section-divider">
-    <div class="section"><h1>Part II. Multiply it back out.</h1><div class="problems-grid">${partB}</div></div>
+    <div class="section"><h1>Part II. Multiply it back out.</h1><div class="problems-grid">${twoCols(rowsB)}</div></div>
     <hr class="section-divider">
-    <div class="section"><h1>Part III. Fill in the common factor.</h1><div class="problems-grid">${partC}</div></div>
+    <div class="section"><h1>Part III. Fill in the common factor.</h1><div class="problems-grid">${twoCols(rowsC)}</div></div>
   `;
 }