Most CSS grids arrange content in neat rows and columns, but sometimes you need a layout with more rhythm—a cascading zigzag that mimics a waterfall. This technique, built with CSS Grid and the transform property, lets you create diagonal flow without breaking accessibility. Here are ten key things you need to know to build it yourself.
1. Understand the Zigzag Layout Goal
The zigzag layout places items in a two-column arrangement where every second item shifts downward, creating a staggered, zigzagging path. This is ideal for portfolios, timelines, or any design seeking visual movement. The shift is typically half the item’s own height, making items cascade diagonally. Unlike a standard grid, this layout feels dynamic and organic. To achieve this, you need a solid understanding of how CSS transforms interact with grid items—especially the translateY function, which moves an element vertically relative to its own size.
2. Avoid Flexbox Pitfalls
A common first thought is to use Flexbox with flex-direction: column and flex-wrap: wrap. While this can create two columns, it introduces two problems. First, you must set a fixed height on the container for wrapping to occur, making the layout brittle. Second—and more critically—the tab order breaks: items flow down the first column (1, 2, 3) then jump to the second (4, 5, 6), which confuses keyboard navigation. The CSS Grid approach we’ll use avoids these issues entirely, preserving logical tab order while delivering the visual stagger.
3. Set Up a Simple Two-Column Grid
Start with a wrapper and a set of items. Define the grid with two equal columns using grid-template-columns: 1fr 1fr and add a small gap. The items remain in natural source order, so the first three items go to the first column, and the next three to the second column. This is the foundation. Apply box-sizing: border-box to all elements to ensure item heights are predictable (including borders). Without it, a 100px item with a 2px border becomes 104px tall, which breaks the shift calculation.
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 800px;
margin: 0 auto;
}
.item {
height: 100px;
border: 2px solid;
}
4. Apply the Transform Shift to Even Items
The core trick: use transform: translateY(50%) on every even item in the grid. Since translateY(50%) moves an element down by half its own height, each second-column item shifts downward exactly half its height, creating a perfect zigzag. Because transforms don’t affect the layout of surrounding items, the grid columns stay aligned, and the visual stagger appears without breaking the document flow.
.item:nth-child(even of .item) {
transform: translateY(50%);
}5. Choose the Right Selector for Accuracy
When selecting even items, you might be tempted to use :nth-of-type(even). However, nth-of-type selects based on the element’s tag name, not its class. If your grid contains mixed element types (e.g., a <div> and a <section>), nth-of-type will count each type separately, breaking the selection. The safe choice is :nth-child(even of .item), which filters by the class .item before applying the even count. This ensures the shift targets only the intended items, regardless of tag variations.
6. Ensure Consistent Item Heights
The shift relies on each item being the same height—otherwise a 50% translation won’t align the zigzag correctly. Use fixed heights, equal content sizes, or a constant number of child elements to keep heights uniform. Also, remember that borders and padding add to the box model: box-sizing: border-box prevents these from inflating the height. If items have different heights, the stagger will appear uneven. For dynamic content, consider using min-height or JavaScript to equalise heights, though these add complexity.
7. Manage Gap and Alignment Issues
The grid’s gap creates vertical spacing between rows, but the transform shift happens after the item flows into its grid cell. This means the shifted item still occupies its original cell position in terms of layout—the transform only moves its visual appearance. As a result, the gap between the shifted item and the one below it may appear inconsistent. To fix this, you can adjust the gap or use negative margins on the shifted items. Alternatively, accept the visual offset as part of the design’s character.
8. Adapt for Responsive Layouts
On narrow screens, a two-column zigzag may become too cramped. Use a media query to switch to a single column layout, removing the transform shift. For example, at viewports under 600px, set grid-template-columns: 1fr and reset the transform on even items. This ensures the layout remains usable on mobile while preserving the zigzag effect on wider screens. You can also increase the gap or stack items vertically with different transforms for a unique mobile experience.
@media (max-width: 600px) {
.wrapper {
grid-template-columns: 1fr;
}
.item:nth-child(even of .item) {
transform: none;
}
}9. Consider Accessibility and Tab Order
One major advantage of this CSS Grid approach is that tab order remains logical: items are read left-to-right, top-to-bottom, row by row. The transform shift does not change the DOM order or focus order. Users navigating via keyboard will tab through items in the order they appear in the source, which matches the visual progression of a zigzag (first column top, second column top, first column bottom, etc.). Always test with a screen reader to confirm that the staggered appearance doesn’t confuse the announced order.
10. Leverage Browser Support and Performance
The transform property is widely supported across modern browsers and is often GPU-accelerated, making it a performant choice for animations and layout shifts. Because transforms don’t trigger layout recalculations (unlike changing margin or top), they are ideal for smooth, efficient visual adjustments. The only caveat: if you plan to animate the zigzag (e.g., on scroll or hover), use transition or animation on transform for optimal frame rates.
By following these ten steps, you can create a stylish zigzag layout that feels organic, stays accessible, and performs well. The combination of CSS Grid and a simple translateY trick offers a clean solution without the headaches of fixed heights or broken tab orders. Experiment with different shift percentages, column counts, and gaps to make the layout uniquely yours.