ساختار چیدمان با سازنده CSS Grid
ابزار سازنده CSS Grid به شما امکان میدهد چیدمانهای گرید را به صورت بصری طراحی کنید. با تنظیم تعداد ستونها و سطرها، تعیین اندازههای آنها و مشخص کردن فواصل بین ترکها، میتوانید ساختار کلی صفحه را ترسیم کنید. با کشیدن ماوس روی سلولهای گرید، آیتمهای فرزند ایجاد میشوند و این ابزار به طور خودکار کدهای CSS و HTML متناظر را تولید میکند تا بتوانید آنها را کپی کرده و در پروژه خود قرار دهید.
تنظیمات و مقادیر ورودی این ابزار شامل موارد زیر است:
- ستونها: عددی بین ۱ تا ۱۲.
- سطرها: عددی بین ۱ تا ۱۲.
- فاصله ستونها: عددی بین 0 تا 48px.
- فاصله سطرها: عددی بین 0 تا 48px.
- اندازه ستونها: هر مقدار معتبر CSS Grid مانند
1fr،200px،auto،min-contentیاminmax(120px, 1fr). - اندازه سطرها: هر مقدار معتبر CSS Grid مانند
1fr،200px،auto،min-contentیاminmax(120px, 1fr). - موقعیتدهی آیتمها: کشیدن ماوس روی سلولها برای مشخص کردن یک ناحیه مستطیلی.
خروجیهای تولید شده توسط ابزار عبارتند از:
- CSS: کدهای تولید شده برای کانتینر گرید و تکتک آیتمهای قرارگرفته روی آن.
- HTML: کدهای تولید شده برای کانتینر گرید و عناصر
divبرای هر یک از آیتمها.
قوانین فنی و رفتارهای ابزار
در زمان کار با سازنده CSS Grid، قوانین مشخصی بر نحوه تولید کدها و تعامل با رابط کاربری حاکم است:
- ترسیم و همپوشانی: با کلیک و کشیدن ماوس روی سلولها و رها کردن آن، یک آیتم فرزند ایجاد میشود که ستونها و سطرهای انتخابشده را پوشش میدهد. هر آیتم ترسیمشده، قوانین
grid-columnوgrid-rowاختصاصی خود را در CSS و یک تگdivمتناظر در HTML دریافت میکند. آیتمها میتوانند روی یکدیگر همپوشانی داشته باشند؛ در این حالت، آیتمی که دیرتر ترسیم شده است روی بقیه قرار میگیرد. برای حذف هر آیتم میتوانید روی علامت "×" روی آن کلیک کنید. - مدیریت اندازهها و فواصل: هر ترک (سطر یا ستون) دارای کادر ورودی اندازه اختصاصی است. اگر مقداری نامعتبر مانند
not-a-grid-trackدر کادر اندازه وارد شود، فیلد ورودی به عنوان نامعتبر علامتگذاری میشود، اما خروجی CSS آخرین مقدار معتبر ثبتشده را حفظ میکند. ترکهایی که اندازه یکسانی دارند، در کد CSS خروجی به صورت خودکار در تابعrepeat()ادغام میشوند تا کد کوتاهتری تولید شود. همچنین، فاصله ستونها و سطرها به طور مستقل تنظیم میشوند، اما در صورتی که مقادیر آنها با یکدیگر برابر باشد، در کد CSS نهایی ادغام شده و به یک ویژگی واحدgapتبدیل میشوند. - محدودیتها و دکمههای کنترلی: این ابزار حداکثر از ۱۶ آیتم پشتیبانی میکند. دکمه "پاک کردن آیتمها" تمام آیتمهای ترسیمشده را حذف کرده و تعداد آیتمها را به ۰ میرساند که نتیجه آن یک کانتینر HTML خالی خواهد بود. دکمه "افزودن آیتم" نیز یک آیتم HTML جدید ایجاد میکند.
الگوهای پیشفرض چیدمان
برای سرعت بخشیدن به طراحی، ابزار سازنده CSS Grid چندین الگوی پیشفرض را ارائه میدهد که ساختارهای رایج وب را شبیهسازی میکنند:
| نام الگوی پیشفرض | ساختار و ویژگیها |
|---|---|
| منوی کناری | ایجاد یک ستون باریک برای ناوبری در کنار بخش محتوای اصلی. |
| هدر و فوتر | چیدمان کلاسیک شامل بخش بالایی (هدر)، بخش مرکزی برای محتوا و بخش پایینی (فوتر). |
| گالری | تولید چیدمانی شامل ۳ ستون، ۲ سطر و ۳ آیتم برای نمایش تصاویر یا کارتها. |
| داشبورد | ساختار چندبخشی مناسب برای صفحات مدیریت و نمایش ابزارکها. |
حریم خصوصی و پردازش دادهها
گرید شما کاملاً در مرورگرتان ساخته میشود. هیچیک از تنظیمات شما در BroBroGo آپلود نخواهد شد. پردازش اطلاعات به صورت محلی در سیستم شما انجام میگیرد.
سوالات متداول
چگونه آیتمها را روی گرید قرار دهم؟
روی سلولها کلیک کرده و بکشید تا یک مستطیل مشخص شود — وقتی رها کنید، به یک آیتم فرزند تبدیل میشود که آن ستونها و سطرها را پوشش میدهد. هر آیتمی که ترسیم میکنید، ویژگیهای grid-column و grid-row اختصاصی خود را در CSS و یک div متناظر در HTML دریافت میکند. آیتمها میتوانند همپوشانی داشته باشند و آیتمی که دیرتر ترسیم شده روی بقیه قرار میگیرد؛ برای حذف هر آیتم از علامت × روی آن استفاده کنید.
آیا ستونها و سطرها میتوانند اندازههای متفاوتی داشته باشند؟
بله. هر ترک (سراسر سطر یا ستون) کادر اندازه اختصاصی خود را دارد و میتوانید هر مقدار معتبر گرید را در آن بنویسید — مانند 1fr, 200px, auto, min-content یا minmax(120px, 1fr). ترکهایی که اندازه یکسانی دارند در تابع repeat() ادغام میشوند تا خروجی کوتاه بماند. فاصله ستونها و سطرها نیز به طور جداگانه تنظیم میشوند و در صورت یکسان بودن، به یک ویژگی gap واحد تبدیل میشوند.
با کد تولید شده چه کار کنم؟
کدهای CSS و HTML را در کنار هم کپی کنید. کد HTML کانتینر را به همراه یک div برای هر آیتم به شما میدهد و CSS گرید را تعریف کرده و موقعیت هر آیتم را مشخص میکند. هر دو را در پروژه خود قرار دهید تا همان طرحبندی که در اینجا رسم کردهاید ایجاد شود.