شبکه های چیدمان CSS پاسخگو بدون درخواست رسانه

پایه و اساس بسیاری از سایت ها همچنان یک شبکه طرح بندی است، چه از Grid یا Flexbox تشکیل شده باشد. در این گزیده از Unleashing the Power of CSS: Advanced Techniques for Responsive User Interfaces ، خواهیم دید که چگونه هر دوی این ابزارها راه هایی را برای ایجاد شبکه های طرح بندی پاسخگو روان و بدون درخواست رسانه ارائه می دهند.

طرح بندی پاسخگو با شبکه

به دلیل تطبیق پذیری و سهولت استفاده، شاید اولین راه حل مورد علاقه من باشد. با استفاده از Grid، می‌توانیم مجموعه‌ای از ستون‌های واکنش‌گرا ایجاد کنیم که در صورت نیاز خودشان را ایجاد می‌کنند. ما یک محدودیت منفرد - حداقل عرضی که ستون‌ها می‌توانند داشته باشند - ارائه می‌کنیم که قبل از شکستن آیتم‌های ستون به ردیف‌های جدید، به‌عنوان نوعی «نقطه گسست» وظیفه دوگانه را انجام می‌دهد.

ویدئوی زیر نشان دهنده رفتاری است که ما دنبال آن هستیم.

در اینجا تمام چیزی که برای انجام این طرح‌بندی شبکه‌ای پاسخگو لازم است، وجود دارد، جایی که حداقل اندازه ستون ما از طریق یک ویژگی سفارشی کمکی روی ۳۰ch تنظیم شده است. این قانون به مرورگر دستور می‌دهد تا هر تعداد ستونی را ایجاد کند که عرض آنها حداقل ۳۰ch باشد:

 .grid { --min : 30 ch ; display : grid ; grid-template-columns : repeat ( auto-fit , minmax ( min ( 100 % , var ( --min ) ) , 1 fr ) ) ; }

از آنجایی که ۱fr مقدار "max" minmax() است، به ستون‌ها اجازه داده می‌شود تا هر فضای باقی‌مانده را به طور عادلانه در یک ردیف پر کنند. پس ، اگر فضای موجود ۸۰ch باشد و دو فرزند شبکه وجود داشته باشد، هر کدام ۴۰ch اشغال خواهند کرد. اگر سه فرزند وجود داشته باشد، فرزند سوم در ردیف دوم قرار می گیرد، زیرا ۸۰ به طور مساوی به حداقل اندازه مجاز ۳۰ تقسیم نمی شود.

نسخه ی نمایشی CodePen زیر نمونه ای زنده از طرح پاسخگوی Grid را ارائه می دهد.

قلم را ببینید
طرح بندی شبکه CSS پاسخگو توسط SitePoint (@SitePoint)
در CodePen.

طرح بندی پاسخگو با Flexbox

ما می توانیم تجربه مشابهی را با Flexbox به دست آوریم. تفاوت بین راه حل Flexbox و Grid این است که آیتم های شبکه ای که به یک ردیف جدید می روند نمی توانند در چندین ستون شبکه گسترش یابند. با Flexbox، می‌توانیم آیتم‌های انعطاف‌پذیر را به سمت رشد هدایت کنیم تا تمام فضای اضافی باقی‌مانده را پر کند، و از «یتیم» که با راه‌حل Grid ظاهر می‌شود جلوگیری کنیم.

در این کد، مانند کد Grid، مرورگر به تعداد ستون هایی که با فضای درون خطی متناسب باشد با حداقل اندازه --min 30ch ایجاد می کند. اگر سه آیتم داشته باشیم و مورد سوم نیاز به جابجایی به یک ردیف جدید داشته باشد، فضای باقیمانده را به دلیل کوتاه‌نویسی flex اشغال می‌کند، که به‌طور مهمی flex-grow را روی ۱ قرار می‌دهد. پس در بیشتر موارد رفتاری مشابه با ۱fr دارد:

 .flexbox-grid { --min : 30 ch ; display : flex ; flex-wrap : wrap ; } .flexbox-grid > * { flex : 1 1 var ( --min ) ; }

تصویر زیر آیتم فهرست نهایی با اعداد فرد را نشان می دهد که به لطف ویژگی flex-grow در دو ستون قرار دارد.

را شامل می شود" loading="lazy">

نکته: در هر دو راه حل Grid و Flexbox، اگر یک gap اضافه کنیم، این فاصله از محاسبه تعداد ستون هایی که ممکن است قبل از اضافه شدن سطرهای جدید ایجاد شود کم می شود.

خوانندگان مشتاق ممکن است متوجه تفاوت کلیدی دیگری بین این راه حل ها شده باشند: هنگام استفاده از Grid، والدین رفتار کودک را تعریف می کنند. برای Flexbox، رفتار چیدمان کودک را روی کودکان تنظیم می کنیم. خلاصه‌نویسی flex به ترتیب، flex-grow ، flex-shrink و flex-basis .

به عنوان یک آزمایش، می‌توانیم مقدار flex-grow را به ۰ تغییر دهیم و ببینیم که چگونه موارد فقط تا مقدار flex-basis گسترش می‌یابند. (با نسخه نمایشی CodePen در زیر آزمایش کنید.) مهم است که flex-shrink تا ۱ نگه دارید، به طوری که در نهایت – زمانی که فضای درون خطی موجود از flex-basis باریک تر است – آیتم ها همچنان مجاز به "کوچک شدن" باشند، زیرا این کار کمک می کند. برای جلوگیری از سرریز

نسخه ی نمایشی CodePen زیر طرح بندی Flexbox ما را در عمل نشان می دهد.

قلم را ببینید
طرح بندی شبکه Flexbox پاسخگو توسط SitePoint (@SitePoint)
در CodePen.

ویژگی flex-basis را می‌توان برای این راه‌حل بیشتر تنظیم کرد تا «نقاط شکست» منحصربه‌فردی برای آیتم‌های مختلف تعیین کند. از آنجایی که ما آن مقدار را از طریق ویژگی سفارشی --min تنظیم می کنیم، و کودکان Flexbox اندازه خود را کنترل می کنند، می توانیم آن را با یک سبک درون خطی تنظیم کنیم:

 <li style="--min: 40ch">...</li>

سایر کودکان فهرست در این مثال همچنان در اطراف آن جریان دارند و از ۳۰ch از قانون پایه استفاده می کنند، اما ستون گسترده تر به طور موثر رفتار را تغییر می دهد.

در اینجا یک نسخه نمایشی CodePen از این کد در عمل آمده است.

قلم را ببینید
طرح‌بندی شبکه‌ای Flexbox پاسخگو – تنظیم – دقیقه توسط SitePoint (@SitePoint)
در CodePen.

در اینجا دو تکنیک دیگر Flexbox وجود دارد که از flex-grow و flex-basis به روش های جالبی استفاده می کنند:

Flexbox Holy Albatross Heydon Pickering که از ستون‌ها به یک ردیف بر اساس عرض کل کانتینر اصلی تقسیم می‌شود.

طرح‌بندی نوار کناری Heydon Pickering و Andy Bell، که نشان می‌دهد چگونه می‌توان نقاط شکست مختلف مبتنی بر Flexbox را برای کنترل بهتر زمان بسته شدن آیتم‌ها مجبور کرد.

این مقاله برگرفته از Unleashing the Power of CSS: Advanced Techniques for Responsive User Interfaces است که در SitePoint Premium موجود است.

خبرکاو