← Back to category

Documentation

How to Build a Two-Column Grid Layout

Grid fits side-by-side cards that should line up. In editor.clincoo.buzz wrap the items in one element, then set the columns in CSS, not with a table.

Two equal columns

display: grid and grid-template-columns: 1fr 1fr make two equal tracks. gap: 1rem adds space without margins pushing each other. Direct children become cells. Add min-width: 0 if a cell holds a long word.

Collapse on a phone

In a max-width: 640px media query, switch to grid-template-columns: 1fr. That one rule is safer than hiding a column. Images inside a cell need max-width: 100%.

Check the preview, then deploy

Narrow the preview and confirm there is no horizontal scroll. Save, then publish from app.clincoo.buzz. To center a single box, keep using Flexbox, not Grid.