UI 元件 中等
News — Multi-column Flow Grid
A newsprint-style article layout where real editorial copy flows continuously across one to four CSS columns. Live controls reflow the text instantly — set the column count, drag the gap wider or tighter, toggle hairline column rules, and switch between justified-and-hyphenated or ragged-right. Built with a spanning headline, drop-capped lead, captioned duotone press photos rendered purely in CSS, an inline pull quote, and a responsive collapse to a single column on narrow screens.
在 Lab 開啟
MCP
html css vanilla-js
目標: JS HTML
程式碼
:root {
/* Editorial newsprint palette */
--cream: #f4efe4;
--paper: #faf7f0;
--white: #ffffff;
--newsprint: #efe9da;
--ink: #16130f;
--ink-2: #2b2620;
--ink-3: #4a443b;
--muted: #7a7164;
--red: #b4291f;
--red-d: #8f1f17;
--red-50: #f3dcd9;
--rule: rgba(22, 19, 15, 0.16);
--rule-2: rgba(22, 19, 15, 0.30);
--rule-hair: rgba(22, 19, 15, 0.10);
--ok: #2f7d4f;
--warn: #b67a18;
--danger: #b4291f;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--serif: "Playfair Display", "Times New Roman", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
/* Live-driven layout vars */
--flow-cols: 2;
--flow-gap: 2.4rem;
--flow-rule: var(--rule);
--flow-align: justify;
}
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
background-image:
radial-gradient(circle at 18% -10%, rgba(180, 41, 31, 0.04), transparent 38%),
radial-gradient(circle at 100% 0%, rgba(22, 19, 15, 0.035), transparent 30%);
background-attachment: fixed;
}
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--ink);
color: var(--paper);
padding: 0.6rem 1rem;
z-index: 50;
font-size: 0.85rem;
letter-spacing: 0.04em;
}
.skip-link:focus {
left: 0.75rem;
top: 0.75rem;
}
:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* ============ MASTHEAD ============ */
.masthead {
max-width: 1080px;
margin: 0 auto;
padding: 1.4rem 1.5rem 0;
}
.masthead__bar {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--rule);
}
.masthead__bar p {
margin: 0;
}
.masthead__brand {
text-align: center;
padding: 1.1rem 0 0.7rem;
border-bottom: 3px double var(--rule-2);
}
.masthead__title {
font-family: var(--serif);
font-weight: 900;
font-size: clamp(2.4rem, 8vw, 5rem);
line-height: 0.95;
margin: 0;
letter-spacing: -0.01em;
color: var(--ink);
}
.masthead__motto {
font-family: var(--serif);
font-style: italic;
font-size: 0.95rem;
color: var(--muted);
margin: 0.4rem 0 0;
}
.masthead__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.2rem 1.6rem;
padding: 0.7rem 0;
border-bottom: 1px solid var(--rule);
}
.masthead__nav a {
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
text-decoration: none;
padding: 0.2rem 0;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.masthead__nav a:hover {
color: var(--ink);
}
.masthead__nav a.is-current {
color: var(--red);
border-bottom-color: var(--red);
}
/* ============ CONTROLS ============ */
.controls {
position: sticky;
top: 0;
z-index: 20;
background: color-mix(in srgb, var(--paper) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--rule);
margin-top: 1rem;
}
.controls__inner {
max-width: 1080px;
margin: 0 auto;
padding: 0.7rem 1.5rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.6rem;
}
.control {
display: flex;
align-items: center;
gap: 0.6rem;
}
.control > label {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
white-space: nowrap;
}
.control--slider {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
min-width: 180px;
}
.control--slider label {
display: flex;
gap: 0.5rem;
align-items: baseline;
}
.control__val {
font-family: var(--serif);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0;
text-transform: none;
color: var(--red);
}
/* Segmented control */
.segmented {
display: inline-flex;
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
overflow: hidden;
background: var(--white);
}
.seg {
appearance: none;
border: 0;
border-left: 1px solid var(--rule);
background: transparent;
font-family: var(--sans);
font-weight: 600;
font-size: 0.85rem;
color: var(--ink-3);
padding: 0.35rem 0.7rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.seg:first-child {
border-left: 0;
}
.seg:hover {
background: var(--newsprint);
}
.seg.is-active {
background: var(--ink);
color: var(--paper);
}
/* Range slider */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
background: var(--rule-2);
border-radius: 99px;
cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--red);
border: 2px solid var(--paper);
box-shadow: 0 0 0 1px var(--rule-2);
}
input[type="range"]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--red);
border: 2px solid var(--paper);
}
/* Switch */
.switch {
display: inline-flex;
align-items: center;
gap: 0.55rem;
cursor: pointer;
text-transform: none !important;
letter-spacing: 0 !important;
}
.switch input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
.switch__text {
font-family: var(--sans);
font-size: 0.82rem;
font-weight: 500;
color: var(--ink-2);
}
.switch__track {
width: 38px;
height: 21px;
border-radius: 99px;
background: var(--rule-2);
position: relative;
transition: background 0.18s;
flex: none;
}
.switch__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
transition: transform 0.18s;
}
.switch input:checked + .switch__track {
background: var(--red);
}
.switch input:checked + .switch__track .switch__thumb {
transform: translateX(17px);
}
.switch input:focus-visible + .switch__track {
outline: 2px solid var(--red);
outline-offset: 2px;
}
.ghost-btn {
appearance: none;
background: transparent;
border: 1px solid var(--rule-2);
border-radius: var(--r-sm);
font-family: var(--sans);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
padding: 0.4rem 0.85rem;
cursor: pointer;
margin-left: auto;
transition: background 0.15s, color 0.15s;
}
.ghost-btn:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
/* ============ STORY ============ */
.story {
max-width: 1080px;
margin: 0 auto;
padding: 2.2rem 1.5rem 3rem;
}
.story:focus {
outline: none;
}
.article__head {
text-align: center;
max-width: 760px;
margin: 0 auto 1.6rem;
}
.kicker {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--red);
margin: 0 0 0.7rem;
}
.headline {
font-family: var(--serif);
font-weight: 800;
font-size: clamp(1.9rem, 5vw, 3.3rem);
line-height: 1.04;
letter-spacing: -0.012em;
margin: 0 0 0.8rem;
color: var(--ink);
text-wrap: balance;
}
.standfirst {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.05rem, 2.4vw, 1.3rem);
line-height: 1.45;
color: var(--ink-3);
margin: 0 auto 1.1rem;
max-width: 620px;
text-wrap: balance;
}
.byline {
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--ink-3);
margin: 0;
padding-top: 0.9rem;
border-top: 1px solid var(--rule);
display: inline-block;
}
.byline__name {
font-weight: 700;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.byline__sep {
margin: 0 0.5rem;
color: var(--rule-2);
}
.dateline {
text-transform: uppercase;
font-weight: 600;
font-size: 0.72rem;
letter-spacing: 0.08em;
}
.readtime {
font-style: italic;
color: var(--muted);
}
/* ============ PRESS PHOTOS (CSS only) ============ */
.press-photo {
position: relative;
width: 100%;
border-radius: var(--r-sm);
overflow: hidden;
isolation: isolate;
}
.press-photo__grain {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0.5;
mix-blend-mode: overlay;
background-image:
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.04) 0,
rgba(255, 255, 255, 0.04) 1px,
transparent 1px,
transparent 3px
),
radial-gradient(rgba(0, 0, 0, 0.22) 1px, transparent 1px);
background-size: 100% 3px, 4px 4px;
}
.press-photo--cosmos {
aspect-ratio: 16 / 9;
background:
radial-gradient(ellipse 38% 60% at 64% 46%, rgba(255, 224, 196, 0.95), rgba(214, 142, 96, 0.55) 32%, transparent 64%),
radial-gradient(circle at 64% 46%, rgba(255, 248, 235, 0.9), transparent 14%),
linear-gradient(118deg, rgba(180, 41, 31, 0.35) 0%, transparent 40%),
radial-gradient(circle at 18% 78%, rgba(43, 38, 32, 0.0), rgba(22, 19, 15, 0.65) 60%),
linear-gradient(160deg, #1c2536 0%, #2a1c2b 42%, #3a1f1a 72%, #14110d 100%);
}
.press-photo--portrait {
aspect-ratio: 4 / 3;
background:
radial-gradient(circle at 38% 34%, rgba(247, 220, 196, 0.55), transparent 40%),
linear-gradient(200deg, rgba(180, 41, 31, 0.22), transparent 46%),
radial-gradient(120% 90% at 70% 120%, rgba(60, 110, 130, 0.4), transparent 55%),
linear-gradient(155deg, #20232b 0%, #2c2620 48%, #15120e 100%);
}
/* Figures */
.lede-figure {
margin: 0 0 1.8rem;
}
.lede-figure figcaption,
.inline-figure figcaption {
margin-top: 0.5rem;
font-size: 0.78rem;
line-height: 1.4;
color: var(--muted);
border-bottom: 1px solid var(--rule-hair);
padding-bottom: 0.6rem;
}
.figcaption__text {
font-style: italic;
}
.figcaption__credit {
display: inline-block;
margin-left: 0.4rem;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
font-size: 0.66rem;
letter-spacing: 0.08em;
color: var(--ink-3);
}
.inline-figure {
margin: 0 0 0.4rem;
break-inside: avoid;
}
/* ============ FLOWING COLUMNS ============ */
.flow {
column-count: var(--flow-cols);
column-gap: var(--flow-gap);
column-rule: 1px solid var(--flow-rule);
border-top: 3px double var(--rule-2);
padding-top: 1.4rem;
margin-top: 0.4rem;
hyphens: auto;
-webkit-hyphens: auto;
}
.flow > p {
margin: 0 0 1rem;
font-size: 1.02rem;
line-height: 1.62;
color: var(--ink-2);
text-align: var(--flow-align);
orphans: 2;
widows: 2;
}
.flow > p:last-child {
margin-bottom: 0;
}
.flow__lead::first-letter {
font-family: var(--serif);
font-weight: 800;
float: left;
font-size: 3.6em;
line-height: 0.78;
padding: 0.08em 0.1em 0 0;
margin-right: 0.04em;
color: var(--red);
}
.flow__lead {
font-size: 1.06rem !important;
}
/* Pull quote inside the flow */
.pullquote {
margin: 0.4rem 0 1.1rem;
padding: 0.8rem 0;
border-top: 2px solid var(--ink);
border-bottom: 1px solid var(--rule);
break-inside: avoid;
}
.pullquote p {
font-family: var(--serif);
font-weight: 700;
font-size: 1.45rem;
line-height: 1.2;
color: var(--ink);
margin: 0 0 0.5rem;
text-align: left;
text-wrap: balance;
}
.pullquote cite {
font-style: normal;
font-size: 0.74rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--red);
}
/* ============ ARTICLE FOOT ============ */
.article__foot {
border-top: 1px solid var(--rule);
margin-top: 1.8rem;
padding-top: 1.1rem;
}
.article__tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0 0 0.9rem;
}
.tag {
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
background: var(--newsprint);
border: 1px solid var(--rule);
border-radius: var(--r-sm);
padding: 0.25rem 0.6rem;
}
.tag--red {
background: var(--red);
color: var(--paper);
border-color: var(--red-d);
}
.article__correction {
font-size: 0.82rem;
color: var(--muted);
font-style: italic;
margin: 0;
max-width: 60ch;
}
.article__correction em {
color: var(--ink-3);
}
/* ============ PAGE FOOT ============ */
.page-foot {
max-width: 1080px;
margin: 0 auto;
padding: 1.4rem 1.5rem 2.5rem;
border-top: 1px solid var(--rule);
font-size: 0.74rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
}
.page-foot p {
margin: 0;
}
/* ============ TOAST ============ */
.toast {
position: fixed;
left: 50%;
bottom: 1.4rem;
transform: translate(-50%, 1.5rem);
background: var(--ink);
color: var(--paper);
font-size: 0.84rem;
font-weight: 500;
letter-spacing: 0.02em;
padding: 0.65rem 1.1rem;
border-radius: var(--r-md);
box-shadow: 0 6px 22px rgba(22, 19, 15, 0.28);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s, transform 0.22s;
z-index: 60;
max-width: calc(100vw - 2rem);
}
.toast.is-on {
opacity: 1;
transform: translate(-50%, 0);
}
.toast strong {
color: #f0c9a3;
font-weight: 700;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
.flow {
column-count: min(var(--flow-cols), 2) !important;
}
}
@media (max-width: 720px) {
.flow {
column-count: 1 !important;
column-rule: none;
}
.controls__inner {
gap: 0.8rem 1.2rem;
}
.ghost-btn {
margin-left: 0;
}
.masthead__bar {
font-size: 0.66rem;
}
}
@media (max-width: 420px) {
.story {
padding: 1.6rem 1.1rem 2.4rem;
}
.masthead {
padding: 1rem 1.1rem 0;
}
.control--slider {
min-width: 140px;
width: 100%;
}
.masthead__nav {
gap: 0.2rem 0.9rem;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}(function () {
"use strict";
var root = document.documentElement;
var flow = document.getElementById("flow");
var toastEl = document.getElementById("toast");
var segs = Array.prototype.slice.call(document.querySelectorAll(".seg"));
var gapInput = document.getElementById("gap");
var gapVal = document.getElementById("gap-val");
var ruleInput = document.getElementById("rule");
var justifyInput = document.getElementById("justify");
var resetBtn = document.getElementById("reset");
var DEFAULTS = { cols: 2, gap: 2.4, rule: true, justify: true };
/* --- Toast helper --- */
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.innerHTML = msg;
toastEl.classList.add("is-on");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("is-on");
}, 1900);
}
/* --- Column count --- */
function setCols(n, announce) {
n = Math.max(1, Math.min(4, parseInt(n, 10) || 2));
root.style.setProperty("--flow-cols", String(n));
flow.setAttribute("data-cols", String(n));
segs.forEach(function (s) {
var active = parseInt(s.getAttribute("data-cols"), 10) === n;
s.classList.toggle("is-active", active);
s.setAttribute("aria-checked", active ? "true" : "false");
});
if (announce) {
toast("Flowing across <strong>" + n + (n === 1 ? " column" : " columns") + "</strong>");
}
}
segs.forEach(function (s) {
s.addEventListener("click", function () {
setCols(s.getAttribute("data-cols"), true);
});
});
/* Keyboard arrow nav on the radiogroup */
var group = document.querySelector(".segmented");
if (group) {
group.addEventListener("keydown", function (e) {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
var current = parseInt(flow.getAttribute("data-cols"), 10);
var next = e.key === "ArrowRight" ? current + 1 : current - 1;
next = Math.max(1, Math.min(4, next));
setCols(next, true);
var target = document.querySelector('.seg[data-cols="' + next + '"]');
if (target) target.focus();
});
}
/* --- Column gap --- */
function setGap(v, announce) {
var num = Math.round(parseFloat(v) * 10) / 10;
root.style.setProperty("--flow-gap", num + "rem");
gapVal.textContent = num.toFixed(1) + "rem";
if (announce) toast("Gap set to <strong>" + num.toFixed(1) + "rem</strong>");
}
gapInput.addEventListener("input", function () {
setGap(gapInput.value, false);
});
gapInput.addEventListener("change", function () {
setGap(gapInput.value, true);
});
/* --- Column rule toggle --- */
function setRule(on, announce) {
root.style.setProperty(
"--flow-rule",
on ? "var(--rule)" : "transparent"
);
ruleInput.checked = on;
if (announce) toast(on ? "Column rules <strong>on</strong>" : "Column rules <strong>off</strong>");
}
ruleInput.addEventListener("change", function () {
setRule(ruleInput.checked, true);
});
/* --- Justify + hyphenate toggle --- */
function setJustify(on, announce) {
root.style.setProperty("--flow-align", on ? "justify" : "left");
flow.style.hyphens = on ? "auto" : "manual";
flow.style.webkitHyphens = on ? "auto" : "manual";
justifyInput.checked = on;
if (announce) {
toast(on ? "Justified & hyphenated" : "Set ragged-right (left aligned)");
}
}
justifyInput.addEventListener("change", function () {
setJustify(justifyInput.checked, true);
});
/* --- Reset --- */
resetBtn.addEventListener("click", function () {
setCols(DEFAULTS.cols, false);
gapInput.value = DEFAULTS.gap;
setGap(DEFAULTS.gap, false);
setRule(DEFAULTS.rule, false);
setJustify(DEFAULTS.justify, false);
toast("Layout reset to <strong>house style</strong>");
});
/* --- Init from defaults --- */
setCols(DEFAULTS.cols, false);
setGap(DEFAULTS.gap, false);
setRule(DEFAULTS.rule, false);
setJustify(DEFAULTS.justify, false);
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>The Meridian Standard — Multi-column Flow Grid</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,600;1,700&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#story">Skip to article</a>
<!-- ============ MASTHEAD ============ -->
<header class="masthead" role="banner">
<div class="masthead__bar">
<p class="masthead__edition">Late City Edition · Vol. CXIV · No. 312</p>
<p class="masthead__price">Thursday, June 8 · $4.00</p>
</div>
<div class="masthead__brand">
<h1 class="masthead__title">The Meridian Standard</h1>
<p class="masthead__motto">All the type that's fit to flow</p>
</div>
<nav class="masthead__nav" aria-label="Sections">
<a href="#story">World</a>
<a href="#story">Politics</a>
<a href="#story" class="is-current" aria-current="true">Science</a>
<a href="#story">Culture</a>
<a href="#story">Opinion</a>
</nav>
</header>
<!-- ============ CONTROLS ============ -->
<section class="controls" aria-label="Layout controls">
<div class="controls__inner">
<div class="control">
<label id="cols-label">Columns</label>
<div class="segmented" role="radiogroup" aria-labelledby="cols-label">
<button class="seg" role="radio" data-cols="1" aria-checked="false">1</button>
<button class="seg is-active" role="radio" data-cols="2" aria-checked="true">2</button>
<button class="seg" role="radio" data-cols="3" aria-checked="false">3</button>
<button class="seg" role="radio" data-cols="4" aria-checked="false">4</button>
</div>
</div>
<div class="control control--slider">
<label for="gap">Column gap <span class="control__val" id="gap-val">2.4rem</span></label>
<input id="gap" type="range" min="1" max="4" step="0.1" value="2.4" />
</div>
<div class="control">
<label class="switch" for="rule">
<input id="rule" type="checkbox" checked />
<span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
<span class="switch__text">Column rules</span>
</label>
</div>
<div class="control">
<label class="switch" for="justify">
<input id="justify" type="checkbox" checked />
<span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
<span class="switch__text">Justify & hyphenate</span>
</label>
</div>
<button class="ghost-btn" id="reset" type="button">Reset</button>
</div>
</section>
<!-- ============ STORY ============ -->
<main id="story" class="story" tabindex="-1">
<article class="article">
<header class="article__head">
<p class="kicker">Science · Deep Field</p>
<h2 class="headline">
Astronomers Trace a River of Cold Gas Feeding a Galaxy at the Dawn of Light
</h2>
<p class="standfirst">
A faint filament stretching across two hundred thousand light-years may
explain how the earliest spiral galaxies grew so quickly — and why the
universe assembled itself faster than the textbooks predicted.
</p>
<p class="byline">
By <span class="byline__name">Eloise Marchetti</span>
<span class="byline__sep">·</span>
<span class="dateline">Cerro Paranal, Chile</span>
<span class="byline__sep">·</span>
<span class="readtime">9 min read</span>
</p>
</header>
<figure class="lede-figure">
<div class="press-photo press-photo--cosmos" role="img"
aria-label="A wide-field telescope image of a luminous galactic disc threaded by a dark filament of gas.">
<span class="press-photo__grain" aria-hidden="true"></span>
</div>
<figcaption>
<span class="figcaption__text">
The Meridian field, imaged in near-infrared, shows a young disc galaxy
skirted by a cold stream (lower left) — the first such structure resolved
this early in cosmic history.
</span>
<span class="figcaption__credit">Composite / Paranal Sky Survey</span>
</figcaption>
</figure>
<!-- The flowing multi-column body -->
<div class="flow" id="flow" data-cols="2">
<p class="flow__lead">
For nearly a decade the readout on Priya Anand's screen had refused to make
sense. Each night the spectrograph high on Cerro Paranal returned the same
stubborn smear of light — a thread of hydrogen so cold and so distant that
it sat at the very edge of what the instrument could measure. Her colleagues
called it the ghost. On Tuesday, after the longest exposure the observatory
had ever attempted, the ghost finally resolved into a shape, and the shape
told a story no model had quite anticipated.
</p>
<p>
The filament, catalogued without ceremony as MS 0312, is a stream of
cold gas pouring directly into a galaxy that existed when the universe was
barely a billion years old. It is not the diffuse fog astronomers expected
to find at such an age, but a coherent river — narrow, dense, and pointed —
channelling raw material into the galaxy's heart at a rate fast enough to
forge new stars by the millions.
</p>
<p>
“We have argued about cold accretion for twenty years on the
blackboard,” Anand said, standing in the control room as the night's
data finished downloading. “To finally see the thing itself, threaded
through a real galaxy this far back — that is the difference between a sketch
and a photograph.”
</p>
<figure class="inline-figure">
<div class="press-photo press-photo--portrait" role="img"
aria-label="A researcher silhouetted against the glowing banks of monitors in an observatory control room.">
<span class="press-photo__grain" aria-hidden="true"></span>
</div>
<figcaption>
<span class="figcaption__text">
Dr. Priya Anand reviews the exposure that resolved the filament.
</span>
<span class="figcaption__credit">Paranal Press Office</span>
</figcaption>
</figure>
<p>
The discovery matters because timing has long been the field's quiet
embarrassment. Galaxies in the early universe appear to have grown up too
fast. Surveys kept turning up massive, orderly discs at epochs when the
prevailing picture said there should only be chaotic, half-formed clumps
still colliding into one another. Something had to be delivering fuel
efficiently, and delivering it early.
</p>
<blockquote class="pullquote">
<p>“The universe did not wait for permission to build galaxies. It found a faster road, and we are only now reading the map.”</p>
<cite>— Dr. Hugo Reyes, theoretical cosmologist</cite>
</blockquote>
<p>
Cold accretion is one candidate for that faster road. In the standard merger
picture, galaxies fatten chiefly by swallowing their neighbours — a violent,
stop-start process. The competing idea holds that long before any collision,
a galaxy can simply drink: cool gas slides down invisible filaments of dark
matter and arrives still cold, never shock-heated, ready to collapse into
stars almost the moment it lands.
</p>
<p>
What sets MS 0312 apart is that the team could measure its temperature
and motion directly. The hydrogen is moving inward at roughly two hundred
kilometres a second, and it is cold enough — only a few thousand degrees —
that it could never have been heated and re-cooled. “That is the
fingerprint,” said Reyes, who built the simulations the team compared
against. “Heated gas leaves scars. This gas is pristine. It came in the
front door.”
</p>
<p>
Not everyone is ready to rewrite the chapter headings. Critics note that a
single filament, however clean, is a single data point, and that the
infrared light has travelled for nearly thirteen billion years through
intervening dust that can mimic the very signal the team is celebrating.
“It is a beautiful result and I want it to be true,” said Naomi
Fischer, an astrophysicist who was not involved in the work. “But one
river does not make a watershed. Show me ten.”
</p>
<p>
Anand agrees, which is why the observatory has already cleared forty nights
of telescope time to hunt for siblings. If cold streams are common, the
survey should find them threading galaxy after galaxy across the same early
epoch. If they are rare, MS 0312 becomes a curiosity rather than a law.
Either answer, she notes, reshapes the story of how everything we can see
first came to be.
</p>
<p>
For now the filament hangs on the wall of the control room, printed large and
taped slightly crooked beside the coffee machine — a smear of light that
waited a decade to become a sentence. “People ask whether it was worth
the years,” Anand said, switching off the dome lights as dawn climbed
the Andes. “We watched a galaxy take its first long drink of the
universe. I would have waited twice as long.”
</p>
</div>
<footer class="article__foot">
<p class="article__tags">
<span class="tag tag--red">Breaking</span>
<span class="tag">Cosmology</span>
<span class="tag">Paranal</span>
<span class="tag">Cold Accretion</span>
</p>
<p class="article__correction">
A version of this article appears in print on Page A1 of the Late City
Edition under the headline: <em>A River at the Dawn of Light.</em>
</p>
</footer>
</article>
</main>
<footer class="page-foot" role="contentinfo">
<p>The Meridian Standard · Fictional Press · Composed in flowing columns.</p>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Multi-column Flow Grid
A single block of article prose pours through a CSS multi-column container while the masthead, headline, standfirst, and lede figure span the full measure above it. The lead paragraph carries a serif drop cap in accent red, the body is justified with automatic hyphenation, and thin hairline rules sit between columns the way they would on a real newspaper page. A pull quote and a captioned inline photo break the flow without disturbing it, each set to avoid awkward column splits.
The sticky control bar drives the layout live through CSS custom properties. A segmented control (also keyboard-navigable with the arrow keys) sets the column count from one to four; a range slider widens or tightens the gap and reports the value in rem; and two toggles flip the column rules on or off and switch the body between justified-and-hyphenated and ragged-right. Every change reflows the same copy instantly, and a small toast confirms each adjustment.
All imagery is simulated with layered CSS gradients inside fixed aspect-ratio boxes — a duotone-ink cosmic field and a control-room portrait — so the demo is fully self-contained with no network requests. Below 900px the grid caps at two columns, and under 720px it collapses cleanly to a single readable column with the rules removed.
Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.