Building an Accessible Masonry Layout with Absolute Positioning

Building an accessible and visually appealing masonry layout presents unique challenges, especially when ensuring it caters to keyboard users. Initially, we faced a problem: items in a masonry grid were not arranged in an intuitive order for users navigating via keyboard. The visual layout was dynamic, but the DOM order was static, forcing users to tab through columns one by one rather than in a natural reading flow.

To illustrate the issue, let’s examine two examples where keyboard accessibility falls short:

1. Pinsplash Before the Rework

In this example from my project Pinsplash, the masonry layout looks visually appealing, but navigating it via keyboard proves cumbersome. Users are forced to tab through each column sequentially, making the experience unintuitive and frustrating. The visual order of items does not align with the DOM order, breaking the natural flow for keyboard navigation. The video below demonstrates this problem in action:

2. Unsplash Desktop Application

The popular desktop application for Unsplash exhibits a similar accessibility flaw. While the interface is stunning and functional for mouse users, it doesn’t prioritize a logical tab order for keyboard users. Just like in Pinsplash, the DOM order and visual layout don’t align, creating an inconsistent experience.

Learning from Pinterest: An Accessible Masonry Layout

Pinterest offers an excellent example of how to design a masonry layout with accessibility in mind. Their implementation ensures a seamless tabbing experience, with items navigable in a logical, row-first order. By aligning the DOM order with the visual layout, they cater to both visual and keyboard users effectively. The video below showcases the accessibility in action on Pinterest:

This article walks you through the step-by-step process of implementing a height-balanced masonry layout using absolute positioning. The final result is a dynamic, responsive layout that balances both visual structure and accessibility.

Understanding the Challenge

A typical masonry layout displays items in a staggered grid, filling vertical space efficiently. However, when this layout uses CSS flexbox or grid, it can result in DOM order mismatches, leading to poor accessibility for keyboard users.

Our goal was twofold:

  1. Visual Harmony: Achieve a height-balanced layout to avoid “holes” in the grid.
  2. Keyboard Accessibility: Maintain logical tabbing order while dynamically positioning items.

Key Concepts in Our Implementation

Absolute Positioning for Dynamic Layouts

We opted for absolute positioning to decouple the visual order from the DOM structure. This gave us complete control over the placement of items in the grid while preserving accessibility.

Here’s how absolute positioning works:

  1. Calculate Positions: Each item’s position is determined programmatically based on its size and column placement.
  2. Update Dynamically: On resize or container width changes, the positions are recalculated to maintain a consistent layout.

Height Balancing

To avoid uneven gaps in the grid, we implemented a height-balancing algorithm that places each item in the column with the current shortest height.

Aspect Ratio Handling

For images, maintaining consistent proportions is critical. Using the original dimensions, we calculated the height dynamically based on a predefined column width and aspect ratio categories (9:16, 4:3, 1:1).

Implementation Steps

Step 1: Setting Up Column Widths

We started by calculating the width of each column based on the container’s width, the number of columns, and the gap between them:

const columns = numColumns // Number of columns (dynamic for mobile/tablet)
const gap = 16 // Space between columns

const totalGap = (columns - 1) * gap // Total gap space
const columnWidth = (containerWidth - totalGap) / columns // Column width

This ensures the grid adapts to different screen sizes, such as mobile or tablet layouts.

Step 2: Categorizing Images by Aspect Ratio

To ensure proportional scaling, we categorized images into three aspect ratio buckets:

  1. Portrait (9:16)
  2. Landscape (4:3)
  3. Square (1:1)

Using these categories, the height of each image was calculated dynamically:

function categorizeByRatio(width, height) {
  const ratio = width / height
  if (ratio < 0.8) return 9 / 16
  if (ratio > 1.3) return 4 / 3
  return 1 / 1
}

// Calculate height
const height = columnWidth / categorizeByRatio(originalWidth, originalHeight)

Step 3: Calculating Absolute Positions

Using a height-balancing algorithm, we calculated the top and left positions for each item:

  1. Identify the Shortest Column: Using an array to track column heights, find the column with the smallest height.
  2. Position the Item: Place the item in the shortest column and update the column height.
const columnHeights = Array(columns).fill(0) // Initial column heights

const calculatePosition = (originalWidth, originalHeight) => {
  const height = columnWidth / categorizeByRatio(originalWidth, originalHeight)
  const shortestColumnIndex = columnHeights.indexOf(Math.min(...columnHeights))

  const top = columnHeights[shortestColumnIndex]
  const left = shortestColumnIndex * (columnWidth + gap)

  columnHeights[shortestColumnIndex] += height + gap

  return { top, left }
}

By adopting absolute positioning, we successfully addressed the accessibility issues for keyboard users. The following video demonstrates how this approach ensures a logical tabbing order, improving the overall user experience.

Step 4: Throttling Resize Events

To optimize performance, we throttled the resize handler to recalculate positions only at intervals, reducing unnecessary computations during rapid resizing:

useEffect(() => {
  const updateContainerWidth = () => {
    if (containerRef.current)
      setContainerWidth(containerRef.current.offsetWidth)
  }

  const throttledUpdate = throttle(updateContainerWidth, 500)

  window.addEventListener('resize', throttledUpdate)
  updateContainerWidth()

  return () => {
    window.removeEventListener('resize', throttledUpdate)
    throttledUpdate.cancel()
  }
}, [])

To illustrate this in action, here are two examples: the first shows Pinterest's implementation, where a slight delay is noticeable during resizing before images are repositioned. The second demonstrates our optimized approach, ensuring a smooth and efficient layout adjustment.

My own implementation:

Step 5: Rendering the Items

Finally, we used the calculated positions and sizes to render the items in a div container with absolute positioning:

return (
  <div className="container" ref={containerRef}>
    {photoList.map((photo, index) => {
      const { top, left } = calculatePosition(photo.width, photo.height)
      const height = columnWidth / categorizeByRatio(photo.width, photo.height)

      return (
        <div
          key={photo.id}
          className="item"
          style={{
            position: 'absolute',
            top,
            left,
            height,
            width: columnWidth,
          }}
        >
          <ImageLoader
            src={photo.url}
            alt={photo.alt || 'Image'}
            aspectRatio={categorizeByRatio(photo.width, photo.height)}
          />
        </div>
      )
    })}
  </div>
)

Step 6: Implementing Height Balancing

While absolute positioning ensures accessibility, it doesn't automatically create a visually balanced grid. This is where height balancing comes into play. The goal of height balancing is to evenly distribute items across columns, minimizing empty space and creating a harmonious layout.

The algorithm identifies the shortest column at each step and places the next item there. By continuously tracking the height of each column, we ensure that the grid remains visually appealing, even with varying item heights.

Here’s a demonstration of the height balancing algorithm in action. Notice how items are placed dynamically to fill gaps and maintain balance across all columns.

Before:

After:

Height balancing not only enhances the visual harmony of the layout but also plays a crucial role in the seamless implementation of infinite scroll by ensuring new items are dynamically placed in the shortest columns without disrupting the overall structure.

Results

1. Visually Appealing Layout

The height-balancing algorithm ensured that columns maintained similar heights, creating a harmonious visual flow without gaps.

2. Improved Accessibility

With the DOM order intact, keyboard users could navigate the grid logically, while the visual layout remained dynamic and responsive.

3. Performance Optimization

Throttling resize events and recalculating positions only when necessary minimized computational overhead.

Conclusion

Building an accessible and visually balanced masonry layout is a rewarding challenge. By combining absolute positioning, height balancing, and aspect ratio calculations, we achieved a grid that adapts dynamically to various screen sizes while remaining accessible to all users.

This implementation demonstrates that thoughtful engineering can bridge the gap between aesthetics and usability, creating a seamless experience for all users.