Project 8: Responsive Blog Layout

Project 8: Responsive Blog Layout

A blog that reshapes between mobile, tablet and desktop with the grid.

Layout plan

• Desktop: a fixed feed in the middle and fixed sidebars.
• Small: everything becomes one column.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 24px;
}

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;   /* single column */
  }
}

Refinements

• Sidebar widths flex down with minmax(180px, 1fr) when space is tight.
• Use rem for global sizing; set it on :root { font-size: 16px }.
• max-width: 72ch on the article keeps lines from very long.

Checklist

• [ ] Desktop: grid with main + at least one aside
• [ ] A query that switches to one column
• [ ] Sidebars hide (display: none) if tiny
• [ ] Font sizes still readable at any size
• [ ] Breakpoints chosen for content, not just device names

TL;DR

Build desktop first, then a @media script to collapse - a grid of columns to one, and save your line lengths.