A grid allocates space and supplies shared alignment lines. It does not decide content priority for you.
By the end: derive equal column widths and identify when a grid should change rather than shrink its content.
Find the common edges
Alignment makes relationships visible without enclosing every item. A shared left edge can connect a heading, paragraph, and action. Numerical values may instead need right or decimal alignment for comparison. Centering all content can make successive line starts harder to locate in longer prose, though a short centered title may be appropriate.
A grid defines tracks and the gaps between them. A column is a vertical track; a gutter separates columns. Outer margins or padding separate content from its container edge. These spaces do different jobs, so changing one should follow a reason rather than an arbitrary desire for more empty area.
Choose an alignment that expresses the relationship
An alignment line is a repeated position, not necessarily a drawn rule. If several workshop names begin at the same horizontal coordinate, the reader can look down that coordinate for the next name. If each begins at a different position, the next starting point depends on the previous label's length and placement. A shared edge reduces that variation. It does not establish what the items mean, so a title and an unrelated price should not share a column merely because their widths happen to fit.
Consider a schedule with a time, workshop name, and room for each entry. Keeping those roles in stable columns allows comparison down a role as well as across one entry. A person checking room changes can look down the room column instead of searching each sentence for a location. The actual text specimen below keeps all schedule facts fixed. Compare how the position of West room changes in the loosely arranged treatment and how it repeats in the aligned one.
Repeat positions for repeated schedule roles
Varying starts
14:00Glass engraving
West room
15:00Copper lettering
North room
16:00Wood carving
West room
Repeated role positions
14:00Glass engraving
West room
15:00Copper lettering
North room
16:00Wood carving
West room
Times, workshop names, and rooms are identical in both treatments. The left varies their indentation; the right gives times one track and names and rooms a shared starting edge. Look down the room positions, then read each complete entry.
The alignment decision depends on which relationship matters. In prose, a common starting edge supports a sequence of lines. In amounts with a shared currency and decimal precision, a common ending edge can align place values. For a short centered invitation, the common center may matter more than repeated starts. These are different tasks rather than competing rules about which edge is always best. A grid should let the useful relationship repeat while avoiding accidental suggestions that unrelated pieces belong together.
Empty space around a component and empty space between components spend the same overall width but have different effects. Enlarging outer padding moves all content inward. Enlarging a gutter separates adjacent columns. If the outer width stays fixed, either change leaves less width for content. Distinguish those operations before asking for more breathing room. For a label squeezed onto several lines, a larger gutter may improve separation while worsening the wrapping problem that first attracted your attention to the component.
The second specimen puts an event heading and its details on one shared edge. In the contrasting treatment, the heading is centered while the details begin elsewhere. Neither treatment changes the address or time. Locate the entrance after reading the title, then describe the movement between the two. The comparison offers a concrete alignment hypothesis, not evidence that a centered heading always causes an error. A short ceremonial title could reasonably use a different alignment from a long operational schedule.
Follow one edge from title to entrance
Centered title
Open studio
Saturday, 14:00
West entrance
Booking required
Shared starting edge
Open studio
Saturday, 14:00
West entrance
Booking required
Only title alignment changes. Both notices retain the same time, entrance, booking condition, type sizes, and spacing. The right title shares the details' left edge; this is a visible relationship, not a measured advantage.
Visual alignment also differs from document structure. A list of schedule entries should retain meaningful entry groupings in markup rather than become unrelated text fragments positioned on a page. If the visual columns disappear, each time still needs to belong to its workshop and room. This is why reading the specimen row by row is a useful second task after comparing down a column. A successful arrangement must preserve both relationships instead of making one clear by breaking the other in the underlying content.
Account for the available width
Begin with a 600-unit container and subtract 24 units on each side. For three equal columns, two gutters of 24 units consume another 48. Divide the remaining 504 units by three to get 168 per column. There are one fewer internal gutters than columns.
The model keeps the container, margins, and gutter fixed while changing column count. The reference remains three columns. The diagrams share one horizontal scale; labels report design units rather than claiming the scaled drawing is a literal CSS-pixel viewport. Actual CSS grids also account for intrinsic sizes, spanning, and minimum-content constraints that this simple division omits.
Reconcile every part of the width
Treat a grid calculation as a budget that must add back to its starting width. Begin at the left container boundary and pass through left margin, column, gutter, column, gutter, column, and right margin. For three columns, you crossed two internal gaps. Counting the sequence makes the number of gutters visible without requiring a memorized formula. The final right boundary should land at the original width. If it does not, either a term is missing or a space has been counted twice.
For the lesson's 600-unit container, the two margins consume 48 units. Subtracting them leaves 552. Two 24-unit gutters consume another 48, leaving 504 for column material. Dividing 504 by three gives 168 per column. The first column starts at 24 and ends at 192. The next starts at 216 and ends at 384. The final one starts at 408 and ends at 576, leaving the rightmost 24 units. Each step accounts for a distinct region of the container.
The segmented drawing below uses one drawing unit for one design unit along its horizontal axis. Its 600-unit budget runs between coordinates 60 and 660 in a 720-wide viewBox. Column fills occupy exactly 168 units each, and the internal gaps occupy 24 each. Vertical dimensions only separate labels and regions; they do not encode another quantity. Read the boundary positions against the arithmetic above. The small margins have their values labeled outside the strip so text does not need to fit inside them.
Three tracks require two internal gutters
The 600-unit strip starts at x = 60 and ends at x = 660. Each filled column is 168 units wide. The 24-unit outer margins and 24-unit internal gutters complete the budget. Horizontal geometry is numerical; vertical placement is schematic.
Now change to two columns while retaining the same outer width and margins. Only one gutter remains, so 552 minus 24 leaves 528, and each column receives 264. Moving from three columns to two therefore does more than divide the old column width differently. It also recovers one former gutter's width for content. For four columns, three gutters consume 72 of the 552 available units. The remaining 480 gives 120 per column, which is positive but may be too narrow for the intended material.
A spanning item occupies the gutters inside its span as well as its constituent tracks. In the three-column budget, a heading spanning two columns can occupy 168 plus 24 plus 168, or 360 units. It does not stop at 336, because that would exclude the internal gutter while pretending the two tracks were adjacent. The outer margins remain outside the span. This allows a broad heading above narrower detail tracks without requiring a second unrelated set of horizontal positions for the heading.
The spanning diagram retains exactly the same three-column budget. Compare its heading region with the two separate lower tracks beneath it. The broad region is not a fourth column or an added block of width. It uses the space already allocated between the first track's start and the second track's end. This distinction is useful when a headline needs more room but the lower content benefits from separate columns. It changes placement within an established grid rather than silently increasing the overall container width.
A spanning item includes its internal gutter
The gold region begins at the first column's left edge and ends at the second column's right edge. Its width is exactly 360 units, including the intervening 24-unit gutter. It uses the same horizontal scale as the three tracks above it.
Inspect the relationship
Allocate the remaining width
W is container width, m each outer margin, g each internal gutter, and n the column count. The reference uses W = 600, m = 24, g = 24, n = 3, giving 168 units.
Both containers use 24-unit outer margins and 24-unit internal gutters. Colored widths represent column widths on one common scale. Controls replace only the number of equal columns. The model does not solve intrinsic content sizing.
Use the column presets to test a content assumption
Choose One broad column in the existing model and verify the reported 552-unit column. There are no internal gutters, so the full width after margins belongs to that column. Then select Two columns and predict 264 before checking the result. The arithmetic changes the number of gutters as well as the number of divisions. Keep the fixed three-column reference in view while comparing widths. Both schematic containers have the same scale, so the narrower selected tracks represent an actual allocation difference rather than a differently sized drawing.
Before selecting Four narrow columns, predict how many internal gutters it will need. Three gutters remove 72 units, leaving four tracks of 120. Verify those numbers in the model. The resulting drawing can look orderly even if real words would not fit. Its colored rectangles contain no long titles or controls. It answers how much width each equal track receives under the stated budget, not whether four workshops with actual names can use that width without clipping or awkward breaks.
Add a content requirement on paper. Suppose a component needs a minimum outer width of 150 design units, including its internal padding and border. In this model, one, two, and three columns satisfy that assumption, while four do not. The three-column minimum outer container is three times 150, plus two gutters of 24, plus both 24-unit margins. That totals 546 units. At 600 units there is a 54-unit surplus, distributed equally as eighteen extra units per column in the equal-track calculation.
That 150-unit minimum is an assumption for this example, not a measured readability threshold. If the component instead requires 190 units, three columns need 666 overall, exceeding the available 600. Two require 452 and are feasible under that new assumption. The minimum-width drawing below compares these totals on one horizontal scale. It shows why a different content constraint can require a different column count without any change to the available container. The geometry is exact for the assumptions, while the assumptions still need real-content testing.
Two different assumptions produce different feasible grids
Each strip contains three minimum-width cards, two 24-unit gutters, and two 24-unit margins. Totals are 546 and 666. At the common 0.8 scale, the 600-unit availability line lies after the first requirement but before the second. Heights encode nothing.
Compare the real workshop specimens below after doing the arithmetic. The facts and text size stay fixed while the allocation changes. Find the longest workshop name and inspect how it wraps. Then find its room to check whether extra height has weakened the relationship between title and location. These HTML examples let the browser lay out words rather than replacing them with strokes. Their appearance can reveal a specific wrapping consequence, but it does not prove that the assumed numerical minimum is appropriate on every platform.
Put real workshop names into the allocation
Three equal tracks
Glass engraving
14:00
West room
Copper lettering
15:00
North room
Wood carving
16:00
West room
One track
Glass engraving
14:00
West room
Copper lettering
15:00
North room
Wood carving
16:00
West room
The same three workshops appear in each treatment at 18 px. The first gives one track per workshop; the second uses a single track. These are actual HTML layouts within the available lesson width, not literal 600-unit specimens or measured minimum-width tests.
Finally, describe a defensible decision in conditional terms. Under a 150-unit component minimum, three tracks fit the 600-unit budget; under a 190-unit minimum they do not. The model verifies the allocation, and the real text comparison helps inspect what occupies it. Neither supplies measured task performance or a universal number of columns for tablets. If two treatments differ in both grouping and allocation, any preference concerns that combination. A separate controlled comparison would be needed to attribute the effect to one property alone.
Use exceptions deliberately
A headline can span columns while body text stays in narrower tracks. A picture can break a grid to serve a specific purpose, but a random set of near-alignments may just look accidental. A grid is an organizing constraint, not a requirement that all objects be identical rectangles.
If columns become too narrow for real content, reduce their count or change the composition. Do not solve every constraint by shrinking text. Consistent spacing tokens, such as a small named set of gaps, help repeated components agree; the exact numbers are a design-system choice, not a law of perception.
Distinguish a calculated track from a usable component
A track is an allocated region; its content may have its own size requirements. A long unbroken identifier, an image with an intrinsic width, or a control with substantial padding can demand more room than the simple division supplies. Intrinsic sizing means that the content itself contributes sizing constraints. The arithmetic model ignores these contributions and simply divides the remainder. Real CSS Grid can account for them, so equal fractional track declarations do not guarantee that every item will behave like an empty rectangle.
A component's outer width also differs from the width available to its text. Suppose a card occupies 168 CSS px and has 12 px padding on each side plus a 1 px border on each side, with those included in the outer width. Subtracting 24 and then 2 leaves 142 px for content. A 160 px unbroken item would exceed that region by 18 px. The original grid budget may balance perfectly while the card's internal budget still fails for its particular content.
The card comparison below makes those boundaries visible with actual words and separate padding. Do not infer its text capacity merely from the outer edge. Follow a wrapped workshop title to the room beneath it and compare the available inner space. Allowing a title to wrap increases height; it does not increase the track's width. If an item cannot wrap meaningfully, alternatives include an appropriate break opportunity or a different allocation. Hiding overflow would remove evidence of the problem rather than repair the layout.
Card padding is part of the allocation
12 px padding on each side
Copper lettering
15:00
North room
24 px padding on each side
Copper lettering
15:00
North room
Both cards show identical facts at 18 px. Each outer width is at most 264 px, capped by its panel. The left has 12 px padding per side; the right has 24 px. Borders are 1 px. The second card therefore leaves 24 px less inner width at equal outer widths.
Rows need a similar distinction between a minimum and a fixed allocation. A minimum height allows a short item to retain a useful shape while a longer one grows. A fixed height holds the boundary regardless of how many lines arrive. The row-growth specimen below keeps the same facts but separates one broad title from the longer condition beneath it. Both remain present. This is an example of ordinary HTML flow inside grid items, not a miniature reflow simulation or a guarantee for translated labels and interactive controls.
A minimum height allows complete conditions to remain
Title and condition in flow
Glass engraving Booking required. Bring your confirmation to the desk. Keep the passage clear.
Condition in its own row
Glass engraving
Booking required. Bring your confirmation to the desk. Keep the passage clear.
Both treatments retain the same 24 px title and 18 px condition. Both cards have a 120 px minimum height, not a fixed height. The right gives the condition its own row. Wrapping can increase either card's height without hiding the final sentence.
Changing visual placement must also preserve a sensible underlying sequence. If a two-column arrangement pairs workshops with booking conditions, moving conditions into a separate visual column does not automatically move them in source or keyboard order. Someone navigating without that visual pairing may encounter every workshop before any condition. Prefer source groupings that keep each workshop with its details, then arrange those groups. A screenshot can show aligned edges while concealing an incoherent reading sequence, so visual neatness alone cannot establish correct structure or focus movement.
When a composition no longer fits, reduce columns or use a meaningful span before shrinking ordinary text. A title spanning tracks may solve a headline constraint while leaving details aligned below. A single column may better preserve longer instruction pairs. Test the real composition at the widths that matter, including enlargement where appropriate. The schematic grid establishes width accounting only. It neither tests WCAG reflow nor proves that an intrinsic sizing solution preserves every interaction, source relationship, or content requirement elsewhere in a complete page.
Exercises
Calculate a new grid
A 720-unit container has 24-unit margins on both sides and two 24-unit gutters. How wide is each of its three equal columns?
Hint
Subtract both margins and all internal gutters before dividing.
Worked answer
Part
Width
Margins
48
Gutters
48
Columns
3 × 208 = 624
Total
720
The width budget must reconcile.
Subtract 48 for margins and 48 for gutters, leaving 624. Each column is 208 units. Counting three gutters would remove an extra 24 and incorrectly give 200. Verify by adding three columns, two gutters, and both margins back to 720.
Choose an alignment for amounts
A list contains 9.50, 120.00, and 3.75 in one currency. Why might a common left edge be a poor comparison aid?
Hint
The place values need a shared position.
Worked answer
Left-aligned amounts
9.50 120.00 3.75
Right-aligned amounts
9.50 120.00 3.75
With equal decimal precision and fixed-width digits, right alignment aligns decimal points and corresponding place values.
Amount
Place-value cue
9.50
Decimal aligned with the other amounts
120.00
Hundreds remain visibly to the left
3.75
Same two decimal places
Alignment should follow the comparison task.
Align decimal points, or right-align equal-precision amounts using tabular numerals. This places corresponding powers of ten above one another. Keep the currency and precision explicit. Left alignment is useful for many labels but does not automatically support numerical comparison.
Sources and further reading
These optional references support the stated mechanisms and technical criteria. Selected relevant passages were reviewed. The notices, diagrams, and numerical examples are original teaching comparisons, not empirical usability results. Design hypotheses need tests with intended readers; technical checks do not establish aesthetic quality or whole-site conformance.