CSS Layout

This lesson covers CSS layout techniques. Replace this with your own content.

Flexbox or grid

Both versions lay out .card elements in rows at least 200px wide that wrap on narrow screens. Switch between the tabs to compare them:

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 200px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}