1. Archive Grid Layout

Grid layout visible through Devtools grid view

The Problem:

The Archive page displays short stories in a complex 16-column grid layout where each story's elements (index, title, genre, date, image) are positioned in alternating, non-sequential grid locations to create visual rhythm. The layout needed to be fully responsive, collapsing to a 3-column mobile grid while maintaining the staggered positioning pattern.

The Solution:

1. Grid column map - An object defining column start positions for each element type
2. CSS custom properties - Dynamic injection of positioning values
3. Responsive Tailwind classes - Breakpoint-specific styling

Grid column map:

const spans = {
    desktop: {
      index: [3, 6, 1],
      title: [13, 10, 7],
      genre: [12, 13, 9],
      date: [1, 7, 3],
      image: [8, 2, 13],
    },
    mobile: {
      index: [1, 2, 1],
      title: [3, 3, 2],
      genre: [3, 3, 3],
      date: [1, 2, 1],
      image: [2, 1, 3],
    },
  };

Custom CSS Properties:

"--desktop-index": spans.desktop.index[i],
"--mobile-index": spans.mobile.index[i],
"--desktop-title": spans.desktop.title[i],
"--mobile-title": spans.mobile.title[i],
"--desktop-genre": spans.desktop.genre[i],
"--mobile-genre": spans.mobile.genre[i],
"--desktop-date": spans.desktop.date[i],
"--mobile-date": spans.mobile.date[i],
"--desktop-image": spans.desktop.image[i],
"--mobile-image": spans.mobile.image[i],

Responsive Tailwind classes: