When designing a visually immersive social platform like Instagram, your user interface must feel silky smooth across smartphones, tablets, and wide desktop monitors. Every component—from the 3-column photo grid and interactive modal overlays to the top navigation bar—needs crisp styling, zero layout shift, and predictable state updates.

Instead of relying on heavy CSS frameworks that bloat your bundle with unused utilities, our project embraces:

  • React 18/19 Modern Component Architecture (Functional Components, Hooks, Concurrent Rendering)
  • Pure Modular CSS Design (Component-scoped stylesheets, CSS Custom Properties/Variables)
  • Responsive Layout Engineering (CSS Grid, Flexbox, Aspect-Ratio Lock, and Mobile-First Breakpoints)

In this tutorial, we will explore how we structured our frontend components to achieve an authentic Instagram look and feel without third-party UI bloat.

1. Architectural Philosophy: Why Pure Modular CSS?

Many modern projects jump immediately into Tailwind CSS, Bootstrap, or heavy CSS-in-JS runtimes. While those have their place, an Instagram clone has specific design needs:

  • Zero Runtime Overhead: No JavaScript calculation costs for styles at runtime.
  • Strict Visual Fidelity: Exact 1:1 Instagram dimensions, borders, aspect ratios, and transitions.
  • High Maintainability: Colocation where each component has its own .jsx and corresponding .css file.

Our Project's Component Structure: 

frontend/src/components/ ├── PhotoGrid/ │ ├── PhotoGrid.jsx # Logic & Virtual DOM │ └── PhotoGrid.css # Component-scoped CSS Grid rules ├── PhotoCard/ │ ├── PhotoCard.jsx # Image rendering & hover overlays │ └── PhotoCard.css # Card aspect-ratio & animations ├── TopBar/ │ ├── TopBar.jsx # Navigation, search, & profile triggers │ └── TopBar.css # Sticky flexbox navigation ├── AuthModal/ │ ├── AuthModal.jsx # Sign in / Register modal dialog │ └── AuthModal.css # Backdrop blur & centered card layout └── PhotoViewer/ ├── PhotoViewer.jsx # Desktop lightbox modal with comments └── PhotoViewer.css # Responsive two-column split layout

Every piece of UI is self-contained: editing PhotoGrid.css only affects the photo grid!

2. Global Design Tokens via CSS Custom Properties

To maintain consistent spacing, brand colors, and typography across the entire app, we define central design tokens in index.css:

:root { /* Instagram Palette */ --bg-primary: #000000; --bg-secondary: #121212; --border-color: #262626; --text-primary: #f5f5f5; --text-secondary: #a8a8a8; --accent-blue: #0095f6; --accent-red: #ed4956; /* Spacing Scale */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Transitions */ --transition-fast: 150ms ease-in-out; }

Using CSS variables makes dark mode adjustments or global branding tweaks instantaneous—change one variable and the entire interface updates automatically.

3. The Responsive Instagram Explore Grid (CSS Grid in Action)

The hallmark feature of Instagram is the explore feed:

  • Mobile (< 600px): 1 column full-width feed for vertical mobile scrolling.
  • Tablet (600px – 1023px): Exactly 2 columns side-by-side.
  • Desktop (1024px+): The iconic 3-column uniform grid.

Here is the exact responsive implementation from PhotoGrid.css:

/* Container centered with max-width */ .explore-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--space-sm); box-sizing: border-box; } /* Mobile Default: 1 Column */ .photo-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); width: 100%; } /* Tablet Breakpoint (600px - 1023px): Exactly 2 Columns */ @media (min-width: 600px) { .explore-main { padding: var(--space-md); } .photo-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } } /* Desktop Breakpoint (1024px+): Exactly 3 Columns */ @media (min-width: 1024px) { .explore-main { padding: var(--space-xl) var(--space-lg); } .photo-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } }

Why grid-template-columns: repeat(3, 1fr)?

The fr (fractional) unit divides available space equally. As the browser window resizes, each column scales in tandem without any layout breaking or horizontal scrolling.

4. The 1:1 Aspect Ratio Lock: Preventing Layout Shifts (CLS)

One of the worst user experience bugs on image-heavy websites is Cumulative Layout Shift (CLS)—when images load, the page jumps around because the browser did not know the height in advance.

In our PhotoCard.css, we lock every image container into a strict 1:1 square ratio using modern CSS aspect-ratio and object-fit:

.photo-card { position: relative; width: 100%; aspect-ratio: 1 / 1; /* Locks container into a perfect square */ background-color: var(--bg-secondary); overflow: hidden; cursor: pointer; border-radius: 4px; } .photo-card__image { width: 100%; height: 100%; object-fit: cover; /* Fills square without distorting proportions */ display: block; transition: transform var(--transition-fast); } /* Subtle zoom on hover */ .photo-card:hover .photo-card__image { transform: scale(1.02); }

Hover Overlay for Likes & Comments Count

Just like native Instagram, hovering over a photo on desktop brings up a semi-transparent black overlay displaying heart and speech bubble counters:

.photo-card__overlay { position: absolute; inset: 0; /* Shorthand for top: 0; right: 0; bottom: 0; left: 0; */ background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; gap: var(--space-lg); opacity: 0; transition: opacity var(--transition-fast); } .photo-card:hover .photo-card__overlay { opacity: 1; /* Fades in smoothly on mouse enter */ } .photo-card__stat { color: #ffffff; font-weight: 600; display: flex; align-items: center; gap: var(--space-xs); }

5. React 18/19 Component Patterns in Practice

Let's see how our PhotoCard.jsx consumes these CSS rules cleanly using modern React functional component design:

import React, { useState } from 'react'; import './PhotoCard.css'; export default function PhotoCard({ post, onSelectPost }) { const [imageLoaded, setImageLoaded] = useState(false); return ( <article className="photo-card" onClick={() => onSelectPost(post)} tabIndex={0} role="button" aria-label={`Photo by ${post.username}: ${post.caption || 'No caption'}`} > {/* Skeleton loader placeholder while downloading */} {!imageLoaded && <div className="photo-card__skeleton" />} <img src={post.image_url} alt={post.caption || 'Instagram post'} className={`photo-card__image ${imageLoaded ? 'photo-card__image--loaded' : ''}`} loading="lazy" /* Native browser lazy loading */ onLoad={() => setImageLoaded(true)} /> {/* Instagram desktop hover overlay */} <div className="photo-card__overlay"> <span className="photo-card__stat"> <HeartIcon /> {post.likes_count ?? 0} </span> <span className="photo-card__stat"> <CommentIcon /> {post.comments_count ?? 0} </span> </div> </article> ); }

Key Highlights:

  1. loading="lazy": Images off-screen are not loaded until the user scrolls near them, saving huge bandwidth.
  2. Skeleton State: A subtle pulsing placeholder fills the square until the image byte stream finishes downloading.
  3. Accessibility: tabIndex={0}, role="button", and informative aria-label allow keyboard and screen-reader navigation.

6. The Lightbox PhotoViewer: Responsive Split Modal

When a user clicks a photo, we open the PhotoViewer Modal:

  • On Desktop: A 2-column split layout (Image on the left, author info + scrollable comments list on the right).
  • On Mobile: Stacks vertically (Image on top, comments below) so it fits narrow screens. 
.photo-viewer__modal { display: flex; flex-direction: column; /* Mobile: stacked vertically */ max-width: 935px; max-height: 90vh; width: 95%; background: var(--bg-secondary); border-radius: 4px; overflow: hidden; } /* Desktop layout switch */ @media (min-width: 768px) { .photo-viewer__modal { flex-direction: row; /* Desktop: side-by-side columns */ height: 600px; } .photo-viewer__media { flex: 1.5; background: #000; display: flex; align-items: center; justify-content: center; } .photo-viewer__details { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border-color); } }

Summary & Key Takeaways

Feature Engineering Choice Benefit
Component Modularity Colocated .jsx + .css Zero style collisions; easy to delete or refactor components.
Grid System CSS Grid (1fr, 2fr, 3fr) Effortless responsive scaling without JavaScript recalculation.
Zero Layout Shift aspect-ratio: 1 / 1 Prevents page jumps while high-res images are downloading.
Image Optimization object-fit: cover + loading="lazy" Crisp photo display and minimal initial network payload.
Design Consistency CSS Custom Properties (var(--...)) Centralized color palette, spacing tokens, and typography.

In the next frontend post, we will explore State Management, API Integration & Infinite Scrolling: Custom Hooks, AbortController, and IntersectionObserver!