متشکرم! ارسالی شما دریافت شد!
اوه! هنگام ارسال فرم مشکلی پیش آمد
از شبکه CSS برای قرار دادن محتوا در یک طرح‌بندی پاسخگو استفاده کنید.
در این درس:
طرح بندی شبکه در Webflow، شبکه CSS را روی یک بوم کاملا بصری زنده می کند. این به شما امکان کنترل مستقیم بیشتری بر طرح و طراحی خود می دهد. با استفاده از شبکه، می‌توانید موارد را در هر نقطه از شبکه تغییر دهید و اندازه آنها را تغییر دهید تا طرح‌بندی‌های قدرتمند و پاسخگو - سریعتر تولید کنید.
می توانید از شبکه برای ایجاد طرح بندی های مختلف استفاده کنید. به عنوان مثال، می توانید از آن برای ایجاد جدولی استفاده کنید که می توانید به راحتی آن را در دستگاه های کوچکتر به کارت تبدیل کنید.
یک شبکه ایجاد و ویرایش کنید
برای ایجاد یک شبکه، عنصر شبکه را از پانل افزودن انتخاب کنید. همچنین می‌توانید طرح‌بندی شبکه‌ای را برای هر عنصر موجود در پانل Style اعمال کنید.
یک شبکه را ویرایش کنید
برای ویرایش یک شبکه، وقتی شبکه را انتخاب کردید، روی Edit grid در زیر Layout در پانل Style کلیک کنید.
برای خروج از حالت ویرایش شبکه ای، ESC را فشار دهید یا روی بوم روی Done کلیک کنید.
ستون ها و ردیف ها را اضافه کنید
برای افزودن ستون‌ها و ردیف‌ها، دکمه‌های افزودن را که روی بوم یا پانل Style ظاهر می‌شوند را انتخاب کنید.
سطرها و ستون ها را کپی و حذف کنید
برای کپی یا حذف یک ستون یا ردیف، روی سرصفحه ستون یا ردیف کلیک راست کرده و Duplicate یا Delete را انتخاب کنید.
همچنین می‌توانید هر سطر یا ستونی را در پانل Style حذف یا کپی کنید، زمانی که ماوس را روی یک ستون یا ردیف قرار می‌دهید.
ترتیب ردیف‌ها و ستون‌ها را مجدداً مرتب کنید
برای مرتب کردن مجدد ردیف‌ها یا ستون‌ها در پانل Style، تنظیمات شبکه را باز کنید و روی سطر یا ستونی که می‌خواهید جابه‌جا شوید نگه دارید، سپس دسته‌ای را که ظاهر می‌شود بکشید.
شکاف بین ستون ها و ردیف ها را تنظیم کنید
شکاف ها به شما این امکان را می دهند که فضای بین آیتم های شبکه را بدون اضافه کردن حاشیه یا بالشتک مشخص کنید. برای تنظیم اندازه شکاف بین ستون‌ها و ردیف‌ها، روی شکاف‌های روی بوم کلیک کرده و بکشید.
یا می توانید اندازه شکاف مورد نظر را در پانل Style وارد کنید.
تنظیم ستون ها و اندازه ردیف
برای تنظیم اندازه ستون های شبکه، عنوان ستون را به اندازه دلخواه روی بوم انتخاب کرده و بکشید.
همچنین می‌توانید یک اندازه سفارشی برای ستون‌ها و ردیف‌ها در ردیف یا عنوان ستون روی بوم یا پانل Style وارد کنید.
واحد FR
طرح شبکه یک واحد طول اضافی را معرفی می کند تا به ما در تعریف یک شبکه کمک کند: واحد FR. واحد FR نشان دهنده کسری از فضای موجود در ظرف شبکه است. شما از آن برای تعیین طول سطرها و ستون ها مانند یک درصد یا واحد پیکسل استفاده می کنید. اما، برخلاف درصدهای ثابت یا واحدهای پیکسل، واحد FR به طور خودکار فضای سلول را در حین تنظیم شکاف ها محاسبه می کند.
ستون هایی با مقدار اندازه 1fr برای پر کردن فضای موجود در یک ظرف شبکه ، کشش یا کوچک می شوند. اگر ستون ها را اضافه یا حذف کنید ، تمام ستون ها با واحد 1FR بر این اساس تنظیم می شوند.
تنظیمات حداقل/حداکثر
تنظیم مقادیر حداقل/حداکثر تضمین می کند که ردیف ها و ستون های شما فراتر از یک مقدار تعیین شده کوچک نمی شوند یا فراتر از یک مقدار حداکثر تعیین شده گسترش می یابند. به عنوان مثال ، یک ردیف دارای ارتفاع پیش فرض خودکار است و برای متناسب با محتوای داخل ، گسترش یا کوچک می شود.
اگر می خواهید ردیف های شما حداقل ارتفاع LET ما را به عنوان 200 px داشته باشد ، می توانید مقدار حداقل Min را روی 200px و مقدار حداکثر به AUTO تنظیم کنید. به این ترتیب ، ردیف بر اساس محتوا رشد می کند و هرگز فراتر از 200px کوچک نمی شود. شما می توانید همین کار را با ستون ها انجام دهید.
برای وارد کردن مقدار حداقل/حداکثر برای هر ستون یا ردیف ، مقادیر مورد نظر را در مسیر آهنگ روی بوم یا در صفحه سبک وارد کنید.
محتوا را در یک شبکه قرار دهید
می توانید هر چیزی را در داخل یک شبکه اضافه کنید: یک عنوان ، یک تصویر ، یک بلوک Div و حتی یک شبکه دیگر. هر چیزی که به شبکه اضافه کنید ، به یک عنصر کودک آن شبکه تبدیل می شود. به طور پیش فرض ، هر کودک شبکه جدید یک سلول شبکه جداگانه را جمع می کند - سلول بعدی موجود را از چپ به راست پر می کند. اگر سلول های دیگری در یک ردیف وجود نداشته باشد ، یک ردیف جدید برای خانه های جدید شبکه های شبکه ایجاد می کند.
جهت جریان محتوای شبکه را تغییر دهید
با به روزرسانی تنظیمات جهت در صفحه سبک می توانید جهت کودکان شبکه را تغییر دهید. در اینجا ، می توانید تنظیم پیش فرض ردیف را انتخاب کنید ، که کودکان را از چپ به راست قرار می دهد. یا ، جهت را به ستون تغییر دهید ، که کودکان را از بالا به پایین قرار می دهد.
محتوای دستی را در یک شبکه قرار دهید
برای غلبه بر تنظیمات قرار دادن خودکار برای قرار دادن دستی یک مورد در شبکه ، در حالی که عنصر را به داخل شبکه می کشید ، تغییر دهید. هر موردی که به صورت دستی در شبکه قرار گرفته باشد ، تنظیم موقعیت دستی را حفظ می کند.
برای تغییر موقعیت موقعیت یک کودک شبکه موجود به کتابچه راهنمای کاربر ، Grid Child را انتخاب کرده و تنظیم موقعیت را در صفحه سبک به روز کنید.
کودکان شبکه به صورت دستی در سلول شبکه تعیین شده خود باقی می مانند. در حالی که کودکان شبکه به طور خودکار قرار می گیرند تا کودکان شبکه جدید را در سلول بعدی قرار دهند.
چندین عنصر را در یک سلول شبکه لانه کنید
می توانید با لانه سازی عناصر در کودک شبکه ، چندین عنصر را به یک سلول شبکه واحد اضافه کنید. برای انجام این کار ، ابتدا می خواهید یک عنصر چیدمان مانند بلوک Div را به شبکه به عنوان کودک مستقیم شبکه اضافه کنید.
هنگامی که عنصر طرح (مانند یک بلوک Div) را به عنوان فرزند شبکه اضافه کردید، می‌توانید با نگه داشتن Control در حالی که عناصر را به داخل سلول شبکه می‌کشید، عناصر دیگری را به بلوک Div اضافه کنید.
محتوای تکراری در یک شبکه
2 روش وجود دارد که می توانید یک فرزند شبکه را برای استفاده مجدد از یک محتوا در بیش از یک سلول شبکه خود کپی کنید:
- Alt (در ویندوز) یا Option (در مک) را نگه دارید و محتوا را بکشید تا نسخه تکراری ایجاد و به یک سلول شبکه جدید منتقل شود.
- محتوا را انتخاب و کپی کنید، سپس شبکه را انتخاب کنید و محتوا را جایگذاری کنید
محتوا را در یک شبکه جابجا کنید، پهن کنید و تراز کنید
هنگامی که محتوای خود را در یک شبکه قرار دادید، می توانید آن ها را به دلخواه دستکاری کنید. می توانید محتوا را به اطراف منتقل کنید تا آنها را در سلول های مختلف تغییر دهید. می توانید محتوا را به گونه ای گسترش دهید که چندین سلول را اشغال کند. همچنین می توانید تراز محتوا را در شبکه تنظیم کنید.
کودکان شبکه را حرکت دهید
برای تغییر مکان محتوا در شبکه، فرزند شبکه را انتخاب کرده و به مکان مورد نظر روی بوم یا در Navigator بکشید.
نظم کودک شبکه را تنظیم کنید
همچنین می‌توانید ترتیب کودکان شبکه را در قسمت تنظیمات فرزند شبکه پانل Style تنظیم کنید.
تراز کردن محتوا در یک شبکه
برای به‌روزرسانی تراز برای همه کودکان در یک شبکه، شبکه را انتخاب کنید و تنظیمات تراز را در پانل سبک تغییر دهید.
برای تغییر تراز یک فرزند شبکه، فرزند شبکه را انتخاب کنید و تنظیمات خود ترازبندی را در بخش فرزند شبکه پانل سبک به‌روزرسانی کنید.
کودکان شبکه دهانه
برای قرار دادن یک فرزند شبکه در چندین سلول شبکه، فرزند شبکه را انتخاب کنید و دستگیره هایی را که در گوشه های سلول شبکه ظاهر می شوند بکشید.
همچنین می‌توانید کودکان شبکه را در پانل Style بچرخانید. برای یک فرزند شبکه با موقعیت یابی خودکار، مشخص کنید که کودک چند ستون و چند ردیف باید داشته باشد.
برای کودکانی که به صورت دستی قرار می گیرند، وارد کنید که مورد به کدام ستون و ردیف شروع و به کدام ردیف ختم می شود.
قفل شبکه موقعیت یابی کودک
مقادیر موقعیت یابی فرزند شبکه منفی عالی هستند اگر:
- نمی خواهید هر بار که ستون های جدید اضافه می کنید، نوار ناوبری خود را مجدداً باز کنید تا همه ستون ها را پر کند
- بدون توجه به اینکه چند ردیف به شبکه خود اضافه می کنید، می خواهید پاورقی خود را در آخرین ردیف شبکه نگه دارید
- می خواهید بخش محتوای اصلی را همیشه در مرکز شبکه خود نگه دارید
اعداد منفی به شما امکان می دهند کودکان را نسبت به انتهای شبکه قرار دهید - آنها سلول ها را از راست به چپ یا پایین به بالا ارجاع می دهند.
برای اینکه نوار ناوبری خود را در همه ستون ها قرار دهید، آن را بین ستون 1 (ستون اول) و ستو ن-1 (آخرین) قرار دهید.
برای نگه داشتن پاورقی خود در آخرین ردیف شبکه خود ، آن را در ردی ف-1/ -1 قرار دهید.
اگر می خواهید کودک را با همان تعداد ستون ها از هر طرف در شبکه نگه دارید ، مقدار "پایان" را تعیین کنید تا معادل منفی مقدار "شروع" باشد. مثال 3/-3 یا 2/-2. حال اگر ستون ها را در نقاط شکست کوچکتر حذف کنید ، کودک در مرکز باقی می ماند.
تنظیمات کودک شبکه را پاک کنید
تنظیمات کودک شبکه فقط برای عنصر انتخاب شده اعمال می شود و در کلاس ذخیره نمی شوند. برچسب های صورتی در پانل سبک تنظیمات تغییر یافته اعمال شده روی عنصر انتخاب شده را در نقطه شکست فعلی نشان می دهد. این سبک ها آبشار را برای پایین آمدن نقاط پایین تر می کنند و با برچسب های نارنجی نشان داده می شوند. هنگامی که یک سبک ارثی (نارنجی) را در نقاط شکست کوچکتر نادیده بگیرید ، این نشانگر دوباره صورتی می شود.
برای حذف هر نوع تنظیم کودک شبکه کاربردی ، روی برچسب صورتی کلیک کنید ، سپس بر روی Reset کلیک کنید.
کودکان همپوشانی
کودکان شبکه ای که دارای موقعیت دستی هستند ، هنگامی که در همان سلول (های) در هم می شوند ، به طور خودکار همپوشانی می کنند. همچنین می توانید ترتیب پشته آن عناصر همپوشانی را کنترل کنید. شما می توانید این کار را با استفاده مجدد از آنها در ناوبر یا با تنظیم موقعیت یابی و تنظیمات Z-Index انجام دهید.
سلولهای شبکه خالی را پر کنید
سلولهای خالی ممکن است در هنگام استفاده از کودکان شبکه در شبکه باقی بمانند. برای جمع آوری خودکار این سلول ها با محتوا ، تنظیم متراکم را در صفحه سبک فعال کنید.
توجه: تلاش های متراکم برای قرار دادن کودکان شبکه در سلول های خالی شبکه شما. این می تواند برای دسترسی بد باشد ، زیرا فقط در جایی که موارد نمایش داده می شود ، نه جایی که در منبع صفحه ظاهر می شوند ، تغییر می کند.
یک شبکه پاسخگو طراحی کنید
برای طراحی شبکه خود ، بنابراین در صفحه نمایش پاسخگو است ، می توانید ستون ها را به صورت دستی در نمای کوچکتر حذف کنید یا به صورت خودکار مناسب را فعال کنید تا به طور خودکار ستون ها و ردیف ها را برای قرار دادن اندازه های صفحه نمایش کوچکتر ایجاد کنید.
به صورت دستی طرح شبکه را در نقاط شکست سبک کنید
برای اینکه مطمئن شوید شبکه شما در تمام دستگاه ها پاسخگو است ، شبکه خود را در نقاط شکست کوچکتر مشاهده کرده و ستون ها را در صورت لزوم حذف کنید.
اگر نمی توانید ستون ها را در نقاط شکست کوچکتر حذف کنید ، سعی کنید:
- جهت شبکه خود را روی ردیف تنظیم کنید
- اطمینان حاصل کنید که شما در آن ستون ها کودکان شبکه ای به صورت دستی نداشته اید
- اطمینان حاصل کنید که عناصر کودک در آن ستون ها وجود ندارد
تناسب خودکار را فعال کنید
Auto-Fit یکی از قدرتمندترین ویژگی های CSS Grid است ، به شما امکان می دهد ستون ها را به طور خودکار تکرار و بسته بندی کنید تا بتوانید یک طرح را بسازید که در هر اندازه صفحه نمایش کار کند-بدون نیاز به تنظیمات در هر نقطه.
برای فعال کردن مناسب خودکار ، همه جز یک ستون و یک ردیف را حذف کنید. حداقل و حداکثر ابعاد را برای ستون تنظیم کرده و امکان خودکار را فعال کنید.
ستون های بیشتر به طور خودکار تولید و تکرار می شوند تا محتوا را با پاسخگویی توزیع کنند.
