Responsive Layouts with Flexbox and Grid

Responsive layouts adapt to available space rather than one device size.
Flexbox navigation
.navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
Grid cards
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}
Media query
@media (max-width: 40rem) {
  .page-header {
    align-items: stretch;
  }
}
Allow text to wrap and avoid fixed heights. Test zoom, long labels and real data.
Check
 Layout works at narrow and wide widths.
 Reading order remains logical.
 Keyboard order matches visual order.
 Tables have a deliberate small-screen treatment.
 Controls remain large enough to use.