Seven two-column patterns: an article with an aside, columns that switch to one without media queries, equal-height cards with aligned buttons, a half-text half-image section, an aside that comes first on phones, newspaper text columns and a golden-ratio split.
An article with a narrower aside, as two grid columns of 2fr and 1fr that stack below a container width of 460px. Using minmax(0, 2fr) instead of plain 2fr stops long words or code in the article from forcing the column wider than its share.
View code
<div class="tcl1"><div class="in"><article><h3>Choosing a font pairing</h3><p>Pair one expressive face with one quiet one, and use each for one job.</p></article><aside><b>Quick tip</b><p>Limit yourself to two families.</p></aside></div></div>
Two flex items whose flex-basis is a calculation: (30rem - 100%) * 999 is a huge positive number when the container is narrow and a huge negative one when it is wide. The result is a clean switch between one column and two at 30rem, with no media query.
Two plan cards with different amounts of text that still end at the same height, because grid items stretch to the row by default. Inside each card a flex column with margin-top: auto pins the button to the bottom so the buttons line up too.
View code
<div class="tcl3"><article><h3>Starter</h3><p>For trying things out.</p><a href="#starter">Choose</a></article><article><h3>Studio</h3><p>For small teams who need shared libraries, roles, version history and priority support.</p><a href="#studio">Choose</a></article></div>
A 50/50 split of copy and picture where the picture fills its half completely with object-fit: cover, whatever the text length. Below the breakpoint the image moves above the text and takes a fixed 16:9 ratio so it does not become a thin strip.
View code
<section class="tcl4"><div class="in"><div class="tx"><h3>Made in small batches</h3><p>Every piece is thrown, trimmed and glazed by hand in our Porto studio.</p></div><div class="im" role="img" aria-label="Ceramic bowls drying on a shelf"></div></div></section>
On a booking page the price box belongs beside the details on desktop but above them on a phone. The aside comes first in the HTML, which is the order that also suits screen readers, and grid placement moves it to the right column on wide containers.
View code
<div class="tcl5"><div class="in"><aside><b>$120 / night</b><a href="#book">Book now</a></aside><article><h3>Cabin by the lake</h3><p>Two bedrooms, a wood stove and a private jetty.</p></article></div></div>
Long text flowing across two columns like a newspaper, with column-width so a narrow container drops to one column automatically. A column rule separates them, and the heading spans both with column-span: all.
View code
<article class="tcl6"><h3>The case for slower software</h3><p>Fast tools are wonderful until they encourage us to skip the thinking. A short pause before publishing catches more mistakes than any linter.</p><p>The best teams we know build that pause into their process: a review, a walk, a night's sleep. The work is better for it.</p></article>
Columns in the golden ratio, 1.618fr and 1fr, which many designers find more natural than a 2:1 split. fr units make any ratio a one-line change, and the gap is a clamp() that grows with the container.
A plain 1fr column will not shrink below its content's minimum width, so a long URL or code block can push it wider than its share. minmax(0, 1fr) lets it shrink and the content wrap or scroll instead.
Source order is reading order
Put content in the HTML in the order it should be read and announced, then use grid placement or order to arrange it visually. Never reorder so far that keyboard focus jumps around the screen.
Stack by container, not screen
A two-column block inside a narrow sidebar should stack even on a wide screen. Container queries switch it based on the space it actually has.
Text columns for text
column-width flows one piece of text into newspaper columns and drops to one column when the container is narrow. Keep it for short reads; long multi-column articles make readers scroll up and down.
Frequently asked questions
Grid or flexbox for two columns?
Grid when the columns have a defined relationship (2:1, fixed and fluid); flexbox when items should wrap based on their own size.
How does the no-media-query switch work?
Its flex-basis is a calculation that is hugely positive below the breakpoint and hugely negative above it, so items jump between full and shared width.
Will these work in older browsers?
Grid and flexbox work everywhere; container queries are supported in all current browsers.