CSS Grid در مقابل Flexbox
از کلنجار رفتن با چیدمانهای CSS خود دست بردارید.
من قبلاً ساعتها وقت صرف اصلاح چیدمانهای خراب با Flexbox میکردم. سعی میکردم آیتمها را در یک ردیف قرار دهم، اما آخرین آیتم تمام عرض صفحه را میگرفت. ظاهر بدی داشت. از margin و ترفندهای اضافی استفاده کردم، اما هیچکدام جواب نمیداد.
سپس طرز فکر خود را به سمت CSS Grid تغییر دادم.
تفاوت ساده است:
- Flexbox برای چیدمانهای یکبعدی است. از آن برای یک ردیف یا یک ستون واحد استفاده کنید.
- CSS Grid برای چیدمانهای دوبعدی است. زمانی از آن استفاده کنید که نیاز دارید همزمان هم ردیفها و هم ستونها را کنترل کنید.
Flexbox را به عنوان ابزاری برای کارهای کوچک در نظر بگیرید. Grid را به عنوان ابزاری برای کل ساختار صفحه خود تصور کنید.
تلهی Flexbox: وقتی از Flexbox برای یک گالری استفاده میکنید، ممکن است آیتمها در هر اندازه صفحهای بهطور کامل تراز نشوند. اغلب با آیتمهای «یتیم» (orphan) مواجه میشوید که ریتم طراحی شما را به هم میزنند.
راهکار Grid: با Grid، میتوانید گالریهای واکنشگرا (responsive) را تنها با یک خط کد ایجاد کنید.
از این کد استفاده کنید:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
این کد به مرورگر میگوید تا جای ممکن ستونهای ۲۵۰ پیکسلی را جای دهد. مرورگر محاسبات را برای شما انجام میدهد. دیگر نیازی به حدس زدن نیست. دیگر خبری از ردیفهای بههمریخته نیست.
مثال داشبورد: ساخت یک داشبورد با یک سایدبار، محتوای اصلی و یک فوتر با Flexbox دشوار است. اغلب برای اینکه فوتر تمام عرض صفحه را بگیرد، به کانتینرهای تو در تو و کدهای نامنظم نیاز دارید.
با Grid، شما مسیرها (tracks) را یکبار تعریف میکنید:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
میتوانید با استفاده از یک دستور، به فوتر بگویید که از اولین ستون تا آخرین ستون را پوشش دهد. کد شما تمیز و خوانا میشود.
توصیه من:
• از Flexbox برای تراز کردنهای ساده در هدرها یا دکمهها استفاده کنید.
• از Grid برای چیدمان اصلی صفحه و گالریهای پیچیده استفاده کنید.
• از تو در تو کردن کانتینرها فقط برای حل مشکل چیدمان دست بردارید.
• از واحد fr برای توزیع آسان فضا استفاده کنید.
همین امروز این را امتحان کنید. یکی از کامپوننتهای قدیمی خود را که با Flexbox ساختهاید، بردارید و آن را با استفاده از CSS Grid بازنویسی کنید. خواهید دید که کدتان کوتاهتر و چیدمانهایتان قدرتمندتر میشوند.