Page layouts Free

Auto-fit responsive grid

A one-line grid that flows listing cards into as many columns as fit, with no breakpoints to manage.

.vk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
@media (max-width: 400px) {
  .vk-grid {
    grid-template-columns: 1fr;
  }
}

Apply .vk-grid to a container of cards to get a responsive grid that adds or removes columns based on available width, keeping each card at least 260px wide. No manual breakpoints needed for the main range.

Notes

.vk-grid is a placeholder container class you set on your card wrapper in Elementor’s Advanced tab.
Change 260px to set the minimum card width and therefore how many columns appear.
The small-screen rule forces a single column below 400px so cards do not get cramped.