Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Responsive Article Grid with Sidebar Toggle

Solution: Responsive Article Grid with Sidebar Toggle

Let’s create a responsive article grid layout with a sidebar that appears only on desktop.

We'll cover the following...

Problem description

Given an HTML page containing a container with two sections:

  • A <main class="article-grid"> element holding multiple <article> elements (each with a title and excerpt)

  • An <aside class="sidebar"> element with author information and links

Write CSS to meet the following requirements:

  • Mobile devices (viewport width less than 600px):

    • Display articles ...