DEV Community

Emmanuel Elikwu
Emmanuel Elikwu

Posted on

I Cloned Instagram's full UI The Two Column Layout (Built With CSS Grid + Flexbox)

#css #tutorial #beginners #webdev

A junior dev on my team once spent two days rebuilding the same sidebar layout three separate times, one version for desktop, one for tablet, one for mobile. Three different CSS files. Three different approaches.

When I asked why, he said: "The layouts are just... different."

They weren't. He just hadn't seen the pattern yet.

That sidebar-plus-content layout he kept rebuilding from scratch? It's the exact same structural pattern behind Gmail, Notion, Slack, YouTube Studio, and pretty much every SaaS dashboard you've ever used. One fixed-width column. One fluid column. CSS Grid for the split, Flexbox for everything living inside it. Once that clicks, you stop rebuilding it every time a design brief looks slightly different, you just recognize it.

That's the idea behind my latest full-length tutorial. I clone Instagram's complete desktop-and-mobile UI from scratch using nothing but HTML, CSS, and vanilla JavaScript, but Instagram is really just the excuse. The actual goal is teaching the two-column app-shell layout as a reusable pattern, not a one-off clone.

Quick,before we go further: if you want to build layouts like this one fast, without the trial and error most developers go through, I put together a companion guide for exactly that, Build Any Responsive Layout with CSS Grid & Flexbox. It's 150+ pages, 100+ real examples, and it's built around the same Grid-vs-Flexbox decision framework this article walks through, so you're laying out pages like a pro instead of guessing and re-guessing grid-template-columns for twenty minutes. Worth keeping open in a tab while you build. GRAB IT HERE

Why this layout shows up everywhere

Almost every "app shell" on the web breaks down into the same two regions:

+---------------+-----------------------------+
|               |                              |
|   NAVIGATION  |        MAIN CONTENT          |
|  (fixed-ish   |       (fluid, scrolls,       |
|    width)     |        holds everything      |
|               |        else)                 |
+---------------+-----------------------------+
Enter fullscreen mode Exit fullscreen mode

A fixed or semi-fixed navigation rail, and a fluid content area that eats up whatever space is left. That's it. That's the whole pattern, and it's worth internalizing because it removes an entire category of "how do I structure this page" decision-fatigue from your future projects.

The rule that actually matters: Grid vs. Flexbox

Here's the mental model I build the whole tutorial around:

CSS Grid is for page-level regions. Flexbox is for content-level rows and columns.

You reach for Grid when you're dividing the page into zones. You reach for Flexbox when you're arranging things inside one of those zones. They're not competing tools, they operate at different scales of the same layout, and you'll switch between them constantly, sometimes nesting one inside the other.

The outer shell itself is just two lines of actual layout logic:

.app-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}
Enter fullscreen mode Exit fullscreen mode

280px is a fixed track — it never moves. 1fr is a fractional track — it means "take up everything that's left over." That combination, fixed-plus-fluid, is the layout decision doing all the work.

What the full tutorial covers

The video walks through the entire build, component by component, including:

  • The exact decision framework for choosing Grid vs. Flexbox (no more guessing)
  • Building a sidebar that stays pinned in place with position: sticky while the main content scrolls independently underneath it
  • A three-line CSS trick for perfectly responsive square image grids, no JavaScript, no fixed pixel dimensions
  • Turning one desktop layout into a working mobile layout using media queries that toggle pre-built regions, instead of rebuilding the page from scratch
  • The gradient-text trick, hover choreography, and a handful of other small details that separate "it works" from "it looks designed"
  • Wiring the whole thing up with vanilla JavaScript, event delegation, DOM traversal, and a fully working create-post/like/comment/share flow

Every section is built live, explained as it's written, so you can follow along and actually type it out yourself rather than just watching a finished result scroll by.

Watch the full build

The complete tutorial is on my channel, Code With Divine, link at the top of this post. If you're a frontend developer, someone leveling up from tutorials into real project structure, or just tired of rebuilding the same layout three different ways, it's worth the watch.

If a CSS pattern has ever made you rebuild something from scratch before someone showed you the "obvious" way to do it, I'd genuinely like to hear about it in the comments.

Top comments (0)