سازنده Grid بصری (Visual Grid Builder)

Visual Grid Builder جدید به شما اجازه می‌دهد grid layout های خود را به‌صورت بصری طراحی و مدیریت کنید. این ویژگی برای هر المانی که کنترل display آن روی grid تنظیم شده در دسترس است و به شما اجازه می‌دهد:

• Adjust grid size: تعداد ستون‌ها و ردیف‌ها را متناسب با نیازهای طراحی تنظیم کنید.
• Resize and move elements: اندازه و موقعیت المان‌ها را در grid با drag and drop ساده تنظیم کنید.
• Query loop support: هر query loop item داخل grid خود را تغییر دهید.
• Breakpoint support: برای breakpoint های مختلف grid layout های متفاوتی بسازید تا responsiveness تضمین شود.
• Rename elements: layout خود را با تغییر نام المان‌ها برای شناسایی بهتر سازماندهی کنید.
• Edit elements: روی هر grid item hover کنید و آیکون قلم را کلیک کنید تا ویرایش آن را در panel المان ادامه دهید.
• Reset options: کل grid یا المان‌های جداگانه را در breakpoint فعلی reset کنید.
• History: از دکمه‌های history برای رفتن به جلو و عقب بین تغییرات استفاده کنید.
• Fill grid: سلول‌های خالی grid را با یک کلیک با استفاده از Block elements به‌طور خودکار پر کنید.
• ID & class level: grid خود را به‌صورت بصری در سطح ID یا class المان طراحی کنید.

Visual Grid Builder modal

نحوه کار

دسترسی به Visual Grid Builder

با تنظیم ویژگی display المان grid layout خود روی grid شروع کنید. پس از فعال‌سازی، آیکون Visual Grid Builder کنار مقدار grid ظاهر می‌شود.

یادداشت

Visual grid builder (آیکون) هنگام bulk-editing المان‌ها در دسترس نیست.

استایل‌دهی به المان‌ها

Visual Grid Builder به شما اجازه می‌دهد هم به المان‌های جداگانه و هم به المان‌هایی که بخشی از query loop هستند استایل بدهید. رویکرد استایل‌دهی به اینکه در سطح class یا ID کار می‌کنید بستگی دارد. این یک مرور کلی از نحوه کار آن است:

المان‌های static:

• ID level: وقتی یک المان static را resize یا جابه‌جا می‌کنید، تغییرات در کنترل‌های Grid Item، به‌طور خاص با به‌روزرسانی ویژگی‌های Grid Column و Grid Row منعکس می‌شوند. این رویکرد ساده است و مستقیماً موقعیت grid المان را تغییر می‌دهد.
• Class level: اگر grid را در سطح class تعریف کرده‌اید، هر resize یا جابه‌جایی المان تغییرات را به‌عنوان custom CSS ذخیره می‌کند. این style های سفارشی روی کنترل Custom CSS المان اصلی اعمال می‌شوند.

المان query loop:

• ID یا class level: هنگام کار با المان‌هایی که بخشی از query loop هستند، تغییرات اندازه یا موقعیت به‌عنوان custom CSS در کنترل Custom CSS المان اصلی ذخیره می‌شوند، صرف‌نظر از اینکه در سطح ID یا class استایل می‌دهید.

مهم: بسیار مهم است که style های CSS auto-generated را تغییر ندهید، زیرا برای حفظ یکپارچگی layout ضروری هستند. این style ها با code comment ها به‌وضوح مشخص شده‌اند، که شناسایی و حفظ آن‌ها را آسان می‌کند. پس از جابه‌جایی یا resize یک المان، CSS به‌طور خودکار به‌روزرسانی می‌شود تا مقادیر جدید را منعکس کند. اگر یک المان را reset کنید، custom CSS auto-generated پاک می‌شود و المان به حالت اولیه برمی‌گردد.

کنترل‌ها (Controls)

اکشن‌های grid:

1. Reset (Grid): تمام style های grid را برای breakpoint انتخاب‌شده فعلی reset می‌کند.
2. Breakpoints: بدون خروج از ویرایشگر بین breakpoint های مختلف جابه‌جا می‌شوید.
3. History: اکشن‌ها را undo یا redo کنید.

کنترل‌های grid:

1. Columns and rows: تعداد ستون‌ها و ردیف‌های درون grid را تنظیم کنید.
2. Gap: فاصله بین المان‌های grid را با هر مقدار CSS معتبری، از جمله variables، تغییر دهید.
3. Use min/max: برای انعطاف‌پذیری بهتر، اندازه ستون یا ردیف را روی minmax(0, 1fr) تنظیم کنید.

وقتی Visual Grid Builder را باز می‌کنید، به‌طور خودکار پیکربندی grid موجود شما را تشخیص داده و کنترل‌های ستون و ردیف را متناسب با آن تنظیم می‌کند.

کنترل‌های panel grid:

1. Individual Columns and rows: اندازه ستون‌ها و ردیف‌ها را به‌دقت کنترل کنید.
2. Elements: المان‌های درون grid را ویرایش کنید.

اندازه‌ها به‌طور خودکار از تنظیمات المان اصلی محاسبه می‌شوند. به‌عنوان مثال، repeat(3, 2fr) به 2fr 2fr 2fr تبدیل می‌شود. همچنین می‌توانید اندازه‌ها را با مقادیری مثل 1fr، 300px یا minmax(0, 1fr) یا هر مقدار معتبر دیگری سفارشی‌سازی کنید تا طراحی را با نیازهایتان تطبیق دهید.

کنترل‌های المان تکی:

1. Resize: روی border ها کلیک کنید و بکشید تا المان‌ها را resize کنید.
2. Move: روی المان کلیک کنید و بکشید تا آن را جابه‌جا کنید.
3. Rename: روی label المان کلیک کنید تا نام آن را تغییر دهید.
4. Reset: تمام styling برای المان را در breakpoint فعلی reset کنید.
5. Edit: Visual Grid Builder را ببندید و المان را در structure panel برای ویرایش بیشتر انتخاب کنید.

همچنین می‌توانید index هر المان را مشاهده کنید، و اگر المانی بخشی از query loop باشد، index خاص آن درون loop نمایش داده می‌شود که از 0 شروع می‌شود.