Responsive Layouts

Beginner Lesson 1 of 1

Responsive Layouts

Build layouts that work beautifully on all screen sizes.

Flexbox Centered Layout

Center content both horizontally and vertically.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

CSS Grid Dashboard

A responsive dashboard layout with sidebar and main content.

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  gap: 1rem;
  min-height: 100vh;
}

.sidebar {
  grid-row: 1 / -1;
}

.header {
  grid-column: 2;
}

.main {
  grid-column: 2;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: 60px auto 1fr;
  }

  .sidebar {
    grid-row: auto;
  }
}

Card Grid

A responsive card grid that adapts to available space.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

Next Recipe

CSS Animations →