خیلی از چیدمان‌های کارتی که با چندین media query ساخته می‌شوند را می‌شود با یک خط CSS Grid جایگزین کرد. ترکیب repeat(auto-fit, minmax(...)) کار را خودکار انجام می‌دهد.

فرمول

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

معنی‌اش این است: هر ستون حداقل ۱۶ رِم و حداکثر یک کسر از فضای آزاد؛ مرورگر هر تعداد ستون که جا شود می‌سازد. استفاده از min(100%, 16rem) باعث می‌شود در صفحه‌های خیلی باریک سرریز افقی ایجاد نشود.

auto-fit یا auto-fill؟

  • auto-fill ستون‌های خالی را هم نگه می‌دارد و کارت‌ها را در عرض کم‌تعداد کوچک می‌کند.
  • auto-fit ستون‌های خالی را جمع می‌کند و کارت‌های موجود کل عرض را پر می‌کنند.
  • برای بیشتر کارت‌ها auto-fit نتیجهٔ مطلوب‌تری می‌دهد.

اگر ارتفاع کارت‌ها باید برابر باشد، خود گرید این کار را به‌صورت پیش‌فرض انجام می‌دهد؛ کافی است کارت‌ها height: 100% داشته باشند.