در این مقاله با استفاده از CSS Grid یک layout زیبا برای پروژه های طراحی سایت ایجاد می کنیم. ساختار کلی HTML ما به شکل زیر است:
حالا container خود را با CSS استایل می دهیم.
حالا با استایلهای زیر عناصر را تنظیم می کنیم:
برای نمایش layout در دیوایسهای مختلف به شکل زیر عمل می کنیم:
و برای دیوایسهای خیلی کوچک به شکل زیر عمل می کنیم:
طراح نهایی ما به شکل زیر خواهد شد:
See the Pen CSS Grid Layout by Dale Nguyen (@techcater) on CodePen.
توجه داشته باشید CSS Grid هنوز در تمام مرورگرها پشتیبانی نمی شود.
