Responsive Layout (Flexbox & Grid) · Full Stack Web Development

Explanation

Use Flexbox for one-dimensional alignment and CSS Grid for page structure so layouts work from phone to desktop.

Code example

css

.page {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .page {
    grid-template-columns: 240px 1fr;
  }
}

Helpful resources

MDN: Responsive design
Media queries and responsive layout on MDN.
DocumentationFreeOfficial45 min
CSS Flexbox — freeCodeCamp
Full Flexbox course on YouTube.
YoutubeFree90 min
MDN: CSS Grid layout
Official CSS Grid guide on MDN.
DocumentationFreeOfficial60 min

Exercise

Rebuild your profile as a responsive layout with a flex navbar and a grid main/sidebar.

Your notes