Refactored PostCard Layout for Responsive 3-Column Grid

Summary

Updated PostCard layout and magazine-grid styles to ensure a clean, centered 3-column layout on larger screens, with proper responsiveness on tablets and mobile devices.

Why Care

Previous grid behavior was inconsistent across screen sizes. Cards overlapped or spilled due to width constraints and max-width issues, particularly on large screens. This refactor makes the layout clean, consistent, and predictable.

Implementation

Changes Made

  • Updated grid behavior in PostCardContentLayout.astro
  • Refined magazine-grid styles to use repeat(3, 1fr) for large screens
  • Adjusted max-width and padding for proper centering and spacing
  • Removed legacy overlapping styles
  • Ensured graceful fallback to 2-column and 1-column layouts for medium and small screens

Files Modified

text 
content/components/articles/PostCardContentLayout.astro
content/components/articles/PostCard.astro
content/styles/cards.css

Technical Details

  • Used max-width: 72rem on .magazine-grid for a 3-column cap
  • Used grid-template-columns: repeat(3, 1fr) and responsive media queries
  • PostCard image container uses clamp(14rem, 22vw, 20rem) for flexible but bounded width
css 
.magazine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
}

@media (max-width: 1024px) {
  .magazine-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 48rem;
  }
}

@media (max-width: 640px) {
  .magazine-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

Integration Points

  • Any pages using <PostCardContentLayout /> will now have predictable, fluid grids
  • No migrations required unless overlapping styles were manually added elsewhere

Documentation

  • No external documentation changes needed; usage pattern remains the same