Grids are the backbone of every scene we draw. A single grid unit decides tile width, block height and spacing, which is why our illustrations line up even when three different people made them. When something looks off, the first thing we check is whether one element quietly ignored the grid.
Pro tip
Hold Shift while dragging in the Layers panel to rotate the 3D view and spot faces that are drawn in the wrong order.
CSS
@media (prefers-reduced-motion: no-preference) { .cube:hover { transform: translateZ(calc(var(--unit) / 2)); transition: transform 180ms ease-out; }}
Farah Aziz
This is the clearest explanation of draw order I have read.
Rosa Medina
How would you handle text that needs to wrap on one of the faces?
Chen Wei
Tiny typo in the second code block: the unit is missing on the translate value.
June Park
The part about layer counts was eye-opening. Our landing page had over a hundred.
Inês DuarteAuthor
Fixed now, thanks for spotting it.
Dana Ortiz
Good question. Usually that means something is flattening the 3D context; check for overflow hidden on a parent.
Pia Jensen
The paper cube exercise sounds fun. Are the templates available somewhere?
Tess Walsh
The templates are in the downloads section of the reference post.
Mateo Rossi
Love the palette. Could you share the exact lightness values?
Kofi Mensah
I teach an intro CSS class and I am going to use this as the final project.
Lena Vogel
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Inês DuarteAuthor
Agreed, this is the part most tutorials skip.