RWD Grid View

RWD Grid View

A responsive grid view means your layout can display content in 1, 2, 3, or more columns depending on screen width. The modern approach is CSS Grid with minmax() and auto-fit.

CSS Grid Auto-fit Pattern

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

This automatically reduces the number of columns on smaller screens without writing many breakpoints.

Flexbox Wrap Alternative

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.row .card {
  flex: 1 1 240px;
}

Summary

• Use CSS Grid for 2D responsive grids (rows + columns).
• repeat(auto-fit, minmax(...)) is the most practical pattern.
• Flexbox wrap is a solid alternative for simpler card rows.