Making Zigzag CSS Layouts With a Grid + Transform Trick

A step-by-step guide to building a zigzag CSS layout using CSS Grid and transforms. The technique places items in a two-column grid, then shifts every even item down using translateY(50%) — which works because transform percentages reference the element's own dimensions, not the parent's. The guide covers the gap correction formula (50% + gap/2), how to handle overflow caused by transforms not affecting layout (solved with padding-bottom using a CSS custom property for item height), and accessibility considerations including screen reader order, focus management, and prefers-reduced-motion.