CSS responsive auto-fit grid

Build a fluid card layout that avoids overflow at narrow widths.

Original Pearto instructional example. Test it in your own environment and adapt it to your requirements.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}
.card { min-width: 0; overflow-wrap: anywhere; }