The growth-share matrix (1970)
Market growth against market share, four named quadrants — stars, cash cows, question marks, dogs. The document that made the 2×2 the default of strategy.
Composition · 2×2 division · diptych to data-matrix
Quadrant overlay
Two lines, four quarters, one of the most useful structures in visual work. The quadrant overlay draws the same axes as the center cross but asks a different question — not "where does the subject sit" but "how is the field divided." It is the grid behind devotional diptychs, four-panel comics, before/after plates, and every two-by-two matrix from the BCG growth-share chart to the Eisenhower box. Here is what the division does, where it comes from, when 2×2 beats a finer grid, and how to keep four quarters in balance.
- First documented
- Medieval diptych panels
- Formalised in design
- 1970 (BCG matrix)
- Origin culture
- European devotional art
- Difficulty
- Beginner-friendly
- Division
- Four equal quarters (2×2)
- Also known as
- 2×2 grid, four-quarter overlay
See the quadrant on five subject categories
‹›
On a single portrait the quadrant is mostly a balance check — does the head sit in one quarter while the diagonally opposite corner stays as breathing space? For one subject, the center cross or thirds usually reads better.
What the overlay shows
The quadrant overlay draws one horizontal line at 50% of the height and one vertical at 50% of the width. The two lines divide the frame into four equal-area rectangles, labelled Q1 to Q4 clockwise from the top-left. Each quarter is a zone that can hold one element of a multi-element composition.
Geometrically these are the same two lines the center cross draws — but the reading is opposite. The center cross treats the crossing point as a place to put one symmetric subject. The quadrant treats the four quarters as containers and the central point as a seam, not a target. The vocabulary is division and balance rather than placement: which quarter holds what, and whether the weight across the four reads even or deliberately graded.
The math, briefly
The quadrant is the 2×2 case of an m×n uniform grid. Both dividing lines fall at the midpoint, producing four congruent rectangles:
verticals at x = 0.5w · horizontals at y = 0.5h → 4 cells of area wh/4
Three properties make the 2×2 the workhorse of multi-element layout:
- It is the smallest grid that crosses two dimensions. A single line gives a diptych along one axis; two lines give the first grid that varies vertically and horizontally — the minimum structure for a two-variable matrix.
- Four is a holdable set. Information-design research treats four as near the upper bound of items the eye groups at a glance without counting, which is why the 2×2 dominates strategic frameworks and comparison plates.3
- Each quarter is geometrically similar to a halved whole. Bisect a quadrant again and you get a 4×4; the structure nests cleanly, so a 2×2 storyboard can subdivide into detail panels without breaking alignment.
For composition the quadrant's job is diagnostic and organisational rather than proportional. Try it in the live tool — the two lines recompute to the exact midpoints of any image you load.
History — what is real and what is myth
Verified history (with primary sources)
The devotional diptych. The two-panel hinged diptych is the oldest formalised use of the vertical-seam division in Western art — portable devotional pairs where a Madonna faced a donor or a Crucifixion faced a saint. The relationship across the seam is the composition: gaze, gesture, and light read from one panel to the other. Extend the pair into a quatrefoil arrangement or stack a before-and-after and the quadrant's two seams appear.
The Cartesian system in composition theory. Rudolf Arnheim's The Power of the Center (1982) names the grid of verticals and horizontals as one of the two fundamental compositional systems — the "Cartesian" framework that organises a picture against gravity and frame, as opposed to the concentric system built around an internal centre.1 The quadrant is the simplest expression of that Cartesian grid.
The panel grid in comics. Scott McCloud's Understanding Comics (1993) analyses the regular panel grid — the 2×2 and its multiples — as the structural backbone of sequential art, where each cell is a moment and the gutters between them carry the reader's inference.5 The Japanese four-panel yonkoma strip is the 2×2 made into a complete narrative unit.
The 2×2 in information design. The modern dominance of the two-by-two matrix dates to a single document: Bruce Henderson's 1970 essay "The Product Portfolio" introduced the Boston Consulting Group growth-share matrix, plotting market growth against market share into four named quadrants.2 The Eisenhower urgency-importance grid and SWOT analysis followed the same structure. Edward Tufte's Envisioning Information (1990) and Jacques Bertin's Semiology of Graphics (1967) both treat the small gridded matrix — the "small multiple" — as a high-density way to compare cases side by side.34
Unverified claims that won't die
"The 2×2 is too simple to be a real composition tool." Simplicity is the point, not a defect. Josef Müller-Brockmann's grid-systems tradition is built on the idea that fewer divisions, used rigorously, read as more designed than many divisions used loosely.6 The 2×2 is coarse on purpose: it is for relationships between a few elements, not fine placement of one.
"A quadrant is the same thing as a centred composition." They share their geometry and nothing else. Filling all four quarters evenly is a balance study; placing one subject on the crossing is a centred composition. Confusing the two leads people to centre a subject when they meant to divide a field, or vice versa.
"Every quadrant must be filled." A persistent layout superstition. Leaving a quarter empty is a standard move — the diagonally opposite void creates tension while keeping the 2×2 legible. Donis Dondis's account of balance treats deliberate emptiness as an active compositional element, not a gap to be plugged.7
When to use it (and when not)
| If you want to... | Use the quadrant | Don't use it for... | Difficulty |
|---|---|---|---|
| Pair two images as a diptych | The vertical axis is the seam; align edges and horizons across it | A single hero subject (use the center cross or thirds) | Beginner |
| Lay out a before/after | The horizontal axis splits the pair top and bottom with equal weight | Continuous panoramas that should not be cut (use thirds) | Beginner |
| Build a four-panel comic or storyboard | Each quarter is one beat; the structure nests into a 4×4 for detail | Irregular, cinematic panel rhythms (use the custom grid) | Intermediate |
| Draw a two-by-two matrix | Two binary axes, four named quadrants — the BCG/Eisenhower layout grid | More than two variables (use a finer grid or small multiples) | Beginner |
| Run a balance study on one image | Compare visual weight across the four quarters at a glance | Fine placement decisions — 2×2 is too coarse (use thirds or phi) | Intermediate |
Famous examples of the 2×2 division
Six places the quadrant structure does real work — in art, in narrative, and in information design.
The Eisenhower box
Do, schedule, delegate, delete. A second canonical 2×2: two binary judgements crossed to produce four clear courses of action.
Warhol grid silkscreens
The same image repeated across a regular grid turns repetition itself into the subject. The 2×2 and its multiples make the seriality legible.
The four-panel comic (yonkoma)
Setup, development, turn, conclusion — a complete narrative in a 2×2. Each cell is a beat; the gutters carry the reader's inference between them.
The devotional diptych
Two panels read as a pair across a central seam — gaze and gesture carry from one side to the other. The original vertical-axis composition.
Scientific comparison plates
Four cases gridded for side-by-side reading. Tufte's "small multiples" make the 2×2 a high-density comparison rather than a decoration.
Common mistakes
1
Using the quadrant for a single subject
A lone portrait or one hero object does not need four zones. Forced into a 2×2, the subject ends up parked in one quarter while three sit empty, which reads as an accident rather than a layout.
Fix: reach for the quadrant when two or more elements share the frame. For one subject use the center cross or an offset grid.
2
Treating "balanced" as "identical"
Filling all four quarters with equal-sized elements often looks inert. Balance is about visual weight, not matching shapes — a small dark element can hold a quarter against a large pale one.
Fix: compare weight, not area. Let one quarter rest as negative space if the other three carry the load.
3
Ignoring the seams across a diptych
In a paired layout the central axis is a join the eye crosses. Horizons, eye-lines, and strong edges that don't meet across the seam break the pair, even when each panel works alone.
Fix: use the axis as an alignment guide — match horizon heights and lead-lines across the seam so the two panels read as one composition.
How different disciplines use it
For painters and illustrators
The quadrant is a planning grid for polyptychs and comic pages. Sketching a four-panel sequence, drop the overlay to keep the cells equal and the gutters honest. For single canvases it serves as a balance study: lay the 2×2 over a thumbnail and check that visual weight is distributed the way you intend across the four quarters rather than piling up in one corner. Illustrators working in the four-panel strip form compose the whole gag inside the quadrant before drawing a line.
For photographers
Two uses. As a layout grid for diptychs and before/after pairs, the axes are the seams you align edges and horizons across. As a balance check on a single frame, the quadrant answers a fast question — is the weight even, or is one quarter doing all the work? This is the quadrant system in photography: lower quadrant framing parks the subject in Q3 or Q4 and lets the upper field carry sky or negative space, while editorial and series photographers use the same 2x2 overlay for photos to plan contact-sheet quads and four-up social layouts where four frames have to read as a set.
For designers
The quadrant is the working grid for every two-by-two diagram a designer is asked to lay out — growth-share, Eisenhower, SWOT, perceptual maps. Beyond diagrams it underlies four-up product grids, comparison tables, and dashboard tiles. The 2×2 is the entry point to the broader grid-systems discipline: master the four-cell layout and the move to 12-column and modular grids is a difference of degree, not of kind.
For architects
In presentation boards the quadrant organises four drawings — plan, section, elevation, detail — into a legible set with equal weight. In analytical diagrams the 2×2 maps a site or a programme against two variables. The structure also appears in quadripartite plan organisation and in four-square parti diagrams, where the building's logic is read as four related zones around a central crossing.
"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."
Josef Müller-Brockmann, Grid Systems in Graphic Design (1981)6
Frequently asked questions
What does the quadrant overlay draw?
A single horizontal line at 50% of the height and a single vertical line at 50% of the width, dividing the frame into four equal-area rectangles. The four quarters are composition zones for multi-element layouts: diptychs, before/after pairs, four-panel grids, and balance studies.
How is the quadrant overlay different from the center cross?
They draw the same two 50% lines. The difference is what you read from them. The center cross emphasises the single intersection point as a placement marker for one symmetric subject. The quadrant overlay emphasises the four resulting quarters as zones for a multi-element layout — division rather than placement.
When is the quadrant overlay the right choice?
For diptychs, before/after comparisons, four-panel comics or storyboards, four-image collages, two-by-two matrices like the BCG or Eisenhower frameworks, and balance studies where you want to confirm visual weight is evenly distributed across all four quarters.
Can I split the frame into more than 2×2?
Yes. For 3×3 use the rule of thirds; for 5×5 use the rule of fifths. The custom grid under Basic Drawing Grids supports any rows by columns from 1×1 up to 50×50, so an unusual split like 2×3 or 4×6 is available too.
Why is the two-by-two matrix so common in design and business?
Two binary dimensions produce four combinations, and four is the largest set most people hold in mind at once. The growth-share matrix, the Eisenhower urgency-importance grid, and SWOT all use the same 2×2 structure the quadrant overlay draws, which makes the overlay a working grid for laying these out.
Does each quadrant need to be filled equally?
No. Even distribution is one goal — a balance study — but graded weight is just as valid. A common pattern places the subject in one quadrant and lets the diagonally opposite quarter sit as negative space, which produces tension along the diagonal while keeping the 2×2 structure legible.
Is the quadrant useful for single-subject photographs?
Less so — a single subject usually wants the center cross or an offset grid. The quadrant earns its place when the frame holds two, three, or four elements whose relationship is the composition, or when you are deliberately checking that weight is balanced across the whole field.
How does the quadrant relate to diptychs?
A diptych is two panels read as a pair, and the quadrant's vertical axis is the seam between them. For a top-and-bottom before/after the horizontal axis is the seam. The overlay turns the panel relationship into a visible grid so you can align edges and horizons across the join.
How do you compose with a 2x2 grid?
Apply the overlay, then treat each of the four equal quarters as a container rather than aiming for the centre. Assign one element per quadrant for a four panel grid layout, or place the subject in one quarter and leave the diagonally opposite quarter as negative space. Then compare visual weight across the four zones and adjust until the balance reads the way you intend.
What is the quadrant system in photography?
It is using the 2x2 division as a framing and balance aid: split the frame into four quarters and decide which quarter the subject occupies and how the remaining three quarters are weighted. Lower quadrant framing keeps the subject low and the upper field open; an even fill across all four quarters is a balance study. It also covers diptych and quadtych layouts where two or four frames are read as one set.
References
- Arnheim, R. The Power of the Center: A Study of Composition in the Visual Arts. University of California Press (1982). ISBN 0-520-04426-6.
- Henderson, B.D. "The Product Portfolio." BCG Perspectives No. 66, Boston Consulting Group (1970).
- Tufte, E.R. Envisioning Information. Graphics Press (1990). ISBN 0-9613921-1-8.
- Bertin, J. Semiology of Graphics: Diagrams, Networks, Maps. University of Wisconsin Press (1983; orig. French 1967). ISBN 0-299-09060-4.
- McCloud, S. Understanding Comics: The Invisible Art. Kitchen Sink Press (1993). ISBN 0-06-097625-X.
- Müller-Brockmann, J. Grid Systems in Graphic Design. Niggli (1981). ISBN 3-7212-0145-0.
- Dondis, D.A. A Primer of Visual Literacy. MIT Press (1973). ISBN 0-262-54029-0.
- Gombrich, E.H. The Sense of Order: A Study in the Psychology of Decorative Art. Phaidon (1979). ISBN 0-7148-1968-X.
Other Composition overlays
Notes from the studio · Three practitioners on the 2×2 grid
Illustrative composites of how the tool gets used in practice — not quotes from named individuals.
Every before/after I publish gets the quadrant first. The horizontal seam keeps the two halves aligned so the comparison reads as one image, not two.
When a client asks for a 2×2 strategy diagram I lay it out on the quadrant overlay — equal quarters, clean axes, no eyeballing the centre.
Four-panel pages start here. One beat per quarter, then I subdivide into a 4×4 for the close-ups without anything drifting out of alignment.
Open the quadrant overlay
Drop a reference image. The quadrant grid applies in one click. Free, in your browser.
Launch Grid Maker Pro →