آموزش طراحی سایت: کارت واکنش‌گرا با CSS Container Queries

Container Query ظاهر کارت را بر اساس عرض ظرف آن تغییر می‌دهد، نه صرفاً عرض صفحه.

این روش برای کارت مشترک میان ستون کناری و محتوای اصلی کاربردی است.

کارت را داخل یک عنصر والد با کلاس card-wrap قرار بده.

برای والد بنویس: .card-wrap { container-type: inline-size; }

حالت پایه کارت را تک‌ستونه بساز: .card { display: grid; gap: 1rem; }

قانون تغییر چیدمان: @container (min-width: 480px) { .card { grid-template-columns: 160px 1fr; } }

این قانون فرزند را تغییر می‌دهد؛ خود ظرف را با پرس‌وجوی اندازه خودش تغییر نده.

برای تصویر داخل کارت بنویس: .card img { width: 100%; height: auto; }

در مرورگر هدف و ظرف‌های باریک و عریض تست کن؛ حالت پایه باید بدون این قابلیت هم خوانا بماند.

نتیجه یک کارت قابل‌استفاده مجدد است که با فضای واقعی خودش سازگار می‌شود.

منابع رسمی — بررسی: ۱۳ مهر ۱۴۰۵ / ۵ اکتبر ۲۰۲۶

اگر تجربه یا پرسشی دارید، همین‌جا برای ما بنویسید.

آموزش‌های مرتبط