Pick your tile's size and a pattern, herringbone, brick, ⅓ offset, chevron, basketweave or diagonal, and see your floor or wall laid with it, every tile to scale with your grout. You get the whole and cut tiles counted and how many to buy. It is free and needs no sign-up.
Your pattern
3 × 12″ herringbone: 42 whole tiles and 45 cuton 60 × 40″ · buy 77 tiles with MSI's 15% extra, 87 if each cut takes its own tile · grout: Mapei 5047 Charcoal
Quick answer: the pattern changes how many tiles are cut, not how many cover the area. MSI’s extra is 10% laid straight or offset, 15% for herringbone or another pattern and 32% on the diagonal. Tile with a side over 15″, such as 12 × 24″, is offset a third at most unless its maker allows more (ANSI A108.02).
How to use the tile pattern visualizer
- Pick the pattern: herringbone (the tiles at 45°), straight herringbone, brick (a half offset), a ⅓ offset, stacked, chevron, basketweave or diagonal. Turned 90° lays it the other way: subway tile upright, or a herringbone’s points facing sideways.
- Enter the tile’s size, or tap one of the common ones (3 × 6, 2 × 8, 3 × 12, 12 × 24…). Width and length in inches, or tap cm.
- Enter the floor or wall, width and height: a backsplash, a shower wall or a whole floor. 60, 5′ and 5 ft all work. A big floor is drawn as a corner of it, still to scale, and counted whole.
- Pick the joint, your tile’s color and a grout. The grouts are Mapei’s and Custom’s own colors. The drawing puts every tile and joint at its real size; Mark the cut tiles shows which ones an edge cuts. Copy link to this pattern keeps it all.
Every pattern on one backsplash, counted
A 60 × 40″ backsplash in 3 × 12″ subway tile with ⅛″ joints, laid from the middle as the visualizer lays it:
| Pattern | Whole | Cut | MSI’s extra | Tiles to buy |
|---|---|---|---|---|
| Stacked | 48 | 36 | 10% | 74 |
| Brick (½ offset) | 42 | 35 | 10% | 74 |
| ⅓ offset | 48 | 36 | 10% | 74 |
| Herringbone | 42 | 45 | 15% | 77 |
| Straight herringbone | 43 | 39 | 15% | 77 |
| Chevron | 36 | 58 | 15% | 77 |
| Basketweave | 42 | 40 | 15% | 77 |
| Diagonal | 40 | 50 | 32% | 88 |
On a backsplash this small, every pattern lays more pieces than MSI’s extra buys: 87 in herringbone against 77 tiles. The rule works because an offcut, the end cut off one tile, is laid at the opposite edge. Where the offcuts don’t fit, buy the count of pieces.
Big tile in a pattern
A 10 × 12′ floor in 12 × 24″ tile: a ⅓ offset lays 72 pieces, 40 of them whole, against MSI’s 66 tiles. Herringbone lays 87, 45 of them cut, against MSI’s 69: its 15% holds only if 18 offcuts are reused. Chevron is about the same, at 86. The straight herringbone and basketweave lay 66 and buy 69.
On a shower wall the extra is plenty: 5 × 8′ in 3 × 6″ brick is 336 pieces, 81 of them cut, and MSI’s 10% buys 352.
The offset rule for tile over 15″
Long tile has some warpage along its length. In a brick (half) offset, the middle of each tile sits beside the end of the next, and the Ceramic Tile Foundation notes that “the inherent warpage on the long side of the tile causes lippage”, one edge standing above its neighbor. ANSI A108.02, as the Foundation quotes it:
- 4.3.8.2, the offset: for tiles “where the side being offset is greater than 15” (nominal dimension), the offset pattern will be a maximum of 33% unless otherwise specified by the tile manufacturer.”
- 4.3.8.1, the joint: for running bond with “any side greater than 15”, the grout joint shall be, on average, a minimum of 1/8” wide for rectified tile and, on average, a minimum of 3/16” wide for calibrated (non-rectified) tiles”, wider by the tile’s own edge warpage.
So a 12 × 24″ or a 24 × 48″ tile goes in at a ⅓ offset or stacked, with ⅛″ joints or wider. The visualizer warns when a half offset or a thin joint breaks the rule.
Common mistakes
- Buying the extra by habit. 10% is MSI’s figure for straight and offset tile; a pattern takes 15% and the diagonal 32%. On a small wall, count the pieces.
- Starting at one wall. Laid from the middle, the cuts at opposite edges match. Started against one wall, the other edge ends in whatever sliver is left.
- A half offset on long tile. Over 15″, ANSI caps the offset at a third unless the maker allows more. Check the box.
- A square tile in herringbone. The pattern needs a rectangle; square tile makes a grid, stacked, offset or diagonal.
- Chevron from plain rectangles. Chevron tile is made with angled ends. Rectangles laid the same way make a herringbone.
- Mosaic counted by the tile. Tile under 2″ comes on mesh sheets: buy it by the sheet.
Tile patterns: questions people ask
What are the main tile patterns?
Stacked (every joint in line), brick or running bond (each row half a tile over), a ⅓ offset, herringbone (rectangles at 45°, end to side), straight herringbone (the same, square to the walls), chevron (tiles with angled ends meeting in a point), basketweave (pairs or threes in squares, turned in turn) and diagonal (a grid at 45°).
What is the best pattern for 12 x 24 tile?
A ⅓ offset or stacked. ANSI A108.02 caps the offset of tile whose offset side is over 15″ at 33% unless the maker allows more, because a long tile’s warpage shows as lippage when its middle sits beside the next tile’s end.
What is a 1/3 offset tile pattern?
Each row moves a third of a tile from the row below, so the joints repeat every third row. On a 12 × 24″ tile with ⅛″ joints each row moves about 8″; on a 3 × 12″ subway tile about 4″.
What is the difference between herringbone and chevron?
Herringbone uses plain rectangles: the end of one meets the side of the next, so the zigzag steps. Chevron tile has its ends cut at an angle, so the tiles meet in a clean point and the joints run in straight V’s.
How much extra tile do I need for herringbone?
MSI’s rule is 15%. On a small area check the pieces: a 60 × 40″ backsplash in 3 × 12″ herringbone lays 87, 45 of them cut, against the 77 the 15% buys. The difference is the offcuts you reuse.
Can you lay subway tile vertically?
Yes: stacked or offset, upright. In the visualizer pick the pattern and Turned 90°. The tile you buy is the same; only the cuts at the edges move.
What tile works for basketweave?
A rectangle two or three times as long as it is wide, such as 4 × 8″ or 3 × 6″ (two tiles a square) or 4 × 12″ (three). The visualizer warns when your tile leaves gaps between the squares.
Can square tiles be laid in herringbone?
No: herringbone, chevron and basketweave need rectangles. Square tile goes stacked, offset or diagonal; on the diagonal MSI’s extra is 32%.
Read next
- Shower tile combinations
- Kitchen backsplash ideas with white cabinets
- Neutral backsplash ideas
- Tub tile ideas
- Choosing the perfect backsplash
Planning the whole room? Draw it in the free 2D planner, to scale. Choosing the grout? The grout color picker finds the Mapei and Custom colors that blend in or stand out on your tile, and the tile calculator counts the boxes, grout and thinset for the room.
About these numbers: the counts are the visualizer’s own, every tile laid from the middle and clipped at the edges; the extra is MSI’s guidance, the grout and the boxes the Tile Calculator’s; the offset and joint rules are ANSI A108.02 4.3.8.1–2 as the Ceramic Tile Foundation quotes them (May 2025). The colors are typical tiles and the makers’ screen colors: check a real tile and a cured grout sample before you buy.