با استفاده از CSS Grid، یک گالری تصاویر سه‌ستونه بسازید که در صفحه‌های کوچک‌تر (عرض ≤ 600px) به یک ستون تغییر کند و فاصله بین آیتم‌ها 10px باشد.

گالری تصاویر را با CSS Grid پیاده کنید: ظرف گالری را display: grid کنید و از grid-template-columns: repeat(3, 1fr) برای سه ستون مساوی استفاده کنید و با gap: 10px فاصله‌ها را تنظیم کنید. در نمایش‌های با عرض ≤ 600px از @media (max-width: 600px) { grid-template-columns: 1fr; } استفاده کنید تا به یک ستون تبدیل شوید. برای تصاویر، width: 100% و object-fit: cover یا استفاده از ارتفاع ثابت با overflow: hidden را به کار ببرید تا تصاویر برش مناسبی داشته باشند. از واحدهای fr برای ستون‌های انعطاف‌پذیر بهره ببرید و به جای استفاده از grid-gap، از gap استفاده کنید.