CSS Grid چیست؟
CSS Grid Layout یک سیستم چیدمان دو بعدی است که در مرورگرهای مدرن تعبیه شده است. یک کانتینر شبکه با display: grid تعریف میکنید، سپس ستونها را با grid-template-columns و ردیفها را با grid-template-rows کنترل میکنید. واحدهای کسری (fr) فضای موجود را به صورت متناسب توزیع میکنند. عناصر فرزند میتوانند با استفاده از grid-column: span N و grid-row: span N چندین ستون یا ردیف را در بر بگیرند.
نحوه استفاده از تولیدکننده CSS Grid
-
تعداد ستونها و ردیفها را با ورودیهای عددی (هر کدام 1–12) تنظیم کنید.
-
grid-template-columns و grid-template-rows را برای کنترل اندازهها تنظیم کنید (مثال: 1fr 2fr، 200px auto).
-
فاصله بین سلولها را تنظیم کنید (مثال: 10px، 1rem).
-
برای انتخاب روی هر سلول در پیشنمایش کلیک کنید (نارنجی میشود).
-
col-span و row-span را در پنل گسترش سلول تنظیم کنید، سپس روی اعمال کلیک کنید. سلولهای گسترشیافته سبز میشوند.
-
برای تغییر فرمت خروجی روی تب CSS یا HTML کلیک کنید، سپس در کلیپبورد کپی کنید.
-
روی بازنشانی همه کلیک کنید تا با یک شبکه 3×3 جدید شروع کنید.