Inspect the working example
The article is 260px wide with two columns and a20px gap. Each column has 120px. The original paragraph stays one DOM node even when its lines occupy both column bands.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| DOM | Count article paragraphs | One p |
| Column allocation | (260−20)/2 | 120px per column |
| Rendered fragments | Inspect text Range rectangles | Line fragments occur in both x bands |
Follow the browser mechanism
Multicolumn layout fragments continuous content. Grid instead places its children into cells; it does not automatically split one paragraph across two cells. Balancing and font metrics affect exact line distribution, which the proof records per engine.
A two-column grid keeps the paragraph in one cell
The alternative places the same paragraph and an empty cell in a two-track grid.
<style>body{margin:8px}</style>
<style>.article{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:260px;font:16px/20px monospace;overflow-wrap:anywhere}.article p{margin:0}</style><section class="article"><p>Source notes stay in one reading sequence. Save the local file, open the browser, inspect the structure, then compare the computed layout. Keep the original text available while checking the result.</p><section></section></section>Paragraph lines occupy only the first 120px grid cell; the second stays empty.
Try the repair
Does having two CSS columns require two paragraphs in the source?
Show the worked answer
No. One paragraph can fragment across columns while keeping its single reading sequence in the DOM.
- Compare DOM node count and actual line-fragment x coordinates.
- Do not promise identical line breaks across fonts or engines.