آموزش CSS پیشرفته : طرح بندی شبکه ای CSS

طرح‌بندی شبکه‌ای CSS یک سیستم طرح‌بندی دوبعدی برای وب است. این سیستم به شما امکان می‌دهد محتوا را در ردیف‌ها و ستون‌ها سازماندهی کنید و ویژگی‌های بسیاری را برای ساده‌سازی ایجاد طرح‌بندی‌های پیچیده ارائه می‌دهد. این مقاله تمام چیزهایی را که برای شروع کار با طرح‌بندی شبکه‌ای باید بدانید، توضیح می‌دهد.

طرح شبکه‌ای چیست؟

یک شبکه مجموعه‌ای از خطوط افقی و عمودی است که الگویی ایجاد می‌کند که می‌توانیم عناصر طراحی خود را در آن قرار دهیم. آنها به ما کمک می‌کنند تا طرح‌هایی ایجاد کنیم که در آنها عناصر ما با حرکت از صفحه‌ای به صفحه دیگر جابجا نمی‌شوند یا عرض آنها تغییر نمی‌کند و ثبات بیشتری در وب‌سایت‌های ما ایجاد می‌کند. یک شبکه معمولاً دارای ستون‌ها، ردیف‌ها و سپس شکاف‌هایی بین هر ردیف و ستون خواهد بود. این شکاف‌ها معمولاً به عنوان ناودان شناخته می‌شوند.

ایجاد شبکه در CSS

پس از تصمیم‌گیری در مورد شبکه‌ای که طراحی شما به آن نیاز دارد، می‌توانید از طرح‌بندی شبکه‌ای CSS برای ایجاد آن استفاده کنید. ابتدا ویژگی‌های اساسی طرح‌بندی شبکه‌ای را بررسی خواهیم کرد و سپس نحوه ایجاد یک سیستم شبکه‌ای ساده برای پروژه شما را بررسی خواهیم کرد. ویدیوی زیر توضیح بصری خوبی در مورد استفاده از شبکه CSS ارائه می‌دهد:

تعریف یک شبکه

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

HTML

CSS

مشابه نحوه تعریف flexbox، شما با تنظیم مقدار ویژگی display به grid، یک طرح‌بندی شبکه‌ای تعریف می‌کنید. همانند مورد flexbox، ویژگی تمام فرزندان مستقیم container را به آیتم‌های شبکه‌ای تبدیل می‌کند. ما CSS زیر را به فایل اضافه کرده‌ایم:

CSS

برخلاف flexbox، آیتم‌ها بلافاصله ظاهر متفاوتی نخواهند داشت. تعریف یک شبکه تک ستونی به شما می‌دهد، بنابراین آیتم‌های شما مانند جریان عادی، یکی زیر دیگری نمایش داده می‌شوند. برای اینکه چیزی شبیه‌تر به شبکه ببینیم، باید چند ستون به شبکه اضافه کنیم. بیایید سه ستون ۲۰۰ پیکسلی اضافه کنیم. می‌توانید از هر واحد طول یا درصد برای ایجاد این مسیرهای ستونی استفاده کنید.

CSS

باید ببینید که آیتم‌ها خودشان را طوری مرتب کرده‌اند که در هر سلول شبکه یکی وجود دارد.

شبکه‌های انعطاف‌پذیر با واحد fr

علاوه بر ایجاد شبکه‌ها با استفاده از طول و درصد، می‌توانیم از fr نیز استفاده کنیم. واحد fr نشان‌دهنده کسری از فضای موجود در کانتینر شبکه است تا بتوان اندازه سطرها و ستون‌های شبکه را به صورت انعطاف‌پذیر تغییر داد. در اینجا فهرست آهنگ‌ها را به تعریف زیر تغییر می‌دهیم و سه آهنگ 1fr ایجاد می‌کنیم:

CSS

اکنون آهنگ‌های انعطاف‌پذیری دارید. واحد fr فضا را به طور متناسب توزیع می‌کند، بنابراین می‌توانید مقادیر مثبت مختلفی را برای آهنگ‌های خود تعیین کنید. فهرست آهنگ‌های خود را به تعریف زیر تغییر دهید و یک آهنگ 2fr و دو آهنگ 1fr ایجاد کنید:

CSS

به شیار اول ۲fr از فضای موجود و به دو شیار دیگر ۱fr اختصاص داده می‌شود که باعث می‌شود شیار اول بزرگتر شود. می‌توانید واحدهای fr را با واحدهای با طول ثابت ترکیب کنید. در این حالت، فضای مورد نیاز برای شیارهای ثابت ابتدا استفاده می‌شود و سپس فضای باقی‌مانده بین شیارهای دیگر توزیع می‌شود. واحد fr فضای موجود را توزیع می‌کند، نه تمام فضا را. بنابراین، اگر یکی از آهنگ‌های شما چیز بزرگی درون خود داشته باشد، فضای آزاد کمتری برای اشتراک‌گذاری وجود خواهد داشت.

شکاف بین خطوط

برای ایجاد فاصله بین مسیرها، از ویژگی‌های زیر استفاده می‌کنیم: column-gap برای فاصله بین ستون‌ها row-gap برای فاصله بین ردیف‌ها gap به عنوان اختصاری برای هر دو در اینجا ویژگی gap را برای ایجاد فاصله بین مسیرها با مقدار 20px اضافه می‌کنیم:

CSS

این فواصل می‌توانند هر واحد طولی یا درصدی باشند، اما واحد fr نمی‌توانند باشند.

تکرار فهرست مسیرها

شما می‌توانید تمام یا فقط بخشی از فهرست آهنگ‌های خود را با استفاده از تابع در CSS تکرار کنید. در اینجا فهرست آهنگ‌ها را به صورت زیر تغییر می‌دهیم:

CSS

اکنون درست مانند قبل، سه آهنگ ۱fr دریافت خواهید کرد. مقدار اول ارسالی به تابع تعداد دفعاتی را که می‌خواهید لیست تکرار شود مشخص می‌کند، در حالی که مقدار دوم لیست آهنگ‌ها است که می‌تواند یک یا چند آهنگ باشد که می‌خواهید تکرار شوند.

شبکه‌های ضمنی و صریح

تا این مرحله، ما فقط مسیرهای ستون را مشخص کرده‌ایم، اما ردیف‌ها به طور خودکار برای نگهداری محتوا ایجاد می‌شوند. این مفهوم، تمایز بین شبکه‌های صریح و ضمنی را برجسته می‌کند. در اینجا کمی بیشتر در مورد تفاوت بین این دو نوع شبکه توضیح داده شده است: - شبکه صریح با استفاده از grid-template-columns یا grid-template-rows ایجاد می‌شود. - شبکه ضمنی، شبکه صریح تعریف شده را هنگامی که محتوا در خارج از آن شبکه قرار می‌گیرد، مانند داخل ردیف‌ها با کشیدن خطوط شبکه اضافی، گسترش می‌دهد. به طور پیش‌فرض، مسیرهای ایجاد شده در شبکه ضمنی دارای اندازه خودکار هستند، که به طور کلی به این معنی است که آنها به اندازه کافی بزرگ هستند تا محتوای خود را در بر بگیرند. اگر می‌خواهید به مسیرهای شبکه ضمنی اندازه بدهید، می‌توانید از ویژگی‌های grid-auto-rows و grid-auto-columns استفاده کنید. اگر grid-auto-rows را با مقدار ۱۰۰ پیکسل به CSS خود اضافه کنید، خواهید دید که آن ردیف‌های ایجاد شده اکنون ۱۰۰ پیکسل ارتفاع دارند.

CSS

تابع minmax

اگر محتوایی به این تراک‌ها اضافه کنیم که از ۱۰۰ پیکسل بلندتر باشند، تراک‌های ۱۰۰ پیکسلی ما خیلی مفید نخواهند بود، که در این صورت باعث سرریز می‌شود. شاید بهتر باشد تراک‌هایی داشته باشیم که حداقل ۱۰۰ پیکسل ارتفاع داشته باشند و در صورت اضافه شدن محتوای بیشتر، همچنان بتوانند گسترش یابند. یک واقعیت نسبتاً اساسی در مورد وب این است که شما هرگز واقعاً نمی‌دانید که چیزی چقدر بلند خواهد بود - محتوای اضافی یا اندازه فونت بزرگتر می‌تواند در طرح‌هایی که سعی می‌کنند در هر بُعدی پیکسل بی‌نقص باشند، مشکل ایجاد کند. تابع به ما امکان می‌دهد حداقل و حداکثر اندازه را برای یک تراک تعیین کنیم، به عنوان مثال، . حداقل اندازه ۱۰۰ پیکسل است، اما حداکثر آن auto است که برای جای دادن محتوای بیشتر، گسترش می‌یابد. در اینجا ما grid-auto-rows را تغییر می‌دهیم تا از مقدار استفاده کند:

CSS

اگر محتوای بیشتری اضافه کنید، خواهید دید که مسیر گسترش می‌یابد تا بتواند در آن جای بگیرد. توجه داشته باشید که این گسترش درست در امتداد ردیف اتفاق می‌افتد.

تعداد ستون‌هایی که جا می‌شوند

می‌توانیم برخی از درس‌هایی که در مورد فهرست کردن مسیر، نمادگذاری تکرار و آموخته‌ایم را برای ایجاد یک الگوی مفید ترکیب کنیم. گاهی اوقات مفید است که بتوانیم از CSS grid بخواهیم به تعداد ستون‌هایی که در کانتینر جا می‌شوند، ستون ایجاد کند. ما این کار را با تنظیم مقدار grid-template-columns با استفاده از تابع انجام می‌دهیم، اما به جای ارسال عدد، کلمه کلیدی auto-fit را ارسال می‌کنیم. برای پارامتر دوم تابع، از با حداقل مقداری برابر با حداقل اندازه مسیر مورد نظر و حداکثر ۱fr استفاده می‌کنیم.

CSS

این روش به این دلیل کار می‌کند که گرید به تعداد دلخواه ستون‌های ۲۳۰ پیکسلی ایجاد می‌کند که در کانتینر جا می‌شوند و سپس هر فضای باقی‌مانده را بین تمام ستون‌ها به اشتراک می‌گذارد. حداکثر مقدار ۱fr است که همانطور که می‌دانیم، فضا را به طور مساوی بین شیارها توزیع می‌کند.

جایگذاری مبتنی بر خط

اکنون از ایجاد یک شبکه به قرار دادن موارد روی شبکه می‌رسیم. شبکه ما همیشه دارای خطوطی است - این خطوط با شروع از ۱ شماره‌گذاری می‌شوند و به حالت نوشتاری سند مربوط می‌شوند. به عنوان مثال، خط ستون ۱ در انگلیسی (از چپ به راست نوشته می‌شود) در سمت چپ شبکه و خط ردیف ۱ در بالای آن قرار می‌گیرد، در حالی که در عربی (از راست به چپ نوشته می‌شود)، خط ستون ۱ در سمت راست قرار می‌گیرد. برای قرار دادن موارد در امتداد این خطوط، می‌توانیم خطوط شروع و پایان ناحیه شبکه را که یک مورد باید در آن قرار گیرد، مشخص کنیم. چهار ویژگی وجود دارد که می‌توانیم برای انجام این کار از آنها استفاده کنیم: grid-column-start grid-column-end grid-row-start grid-row-end این ویژگی‌ها شماره خطوط را به عنوان مقادیر خود می‌پذیرند، بنابراین می‌توانیم مشخص کنیم که یک مورد باید از خط ۱ شروع شود و در خط ۳ پایان یابد، به عنوان مثال. به عنوان یک روش جایگزین، می‌توانید از ویژگی‌های خلاصه‌نویسی استفاده کنید که به شما امکان می‌دهند خطوط شروع و پایان را همزمان مشخص کنید و با یک اسلش / از هم جدا کنید: خلاصه‌نویسی grid-column برای grid-column-start و grid-column-end خلاصه‌نویسی grid-row برای grid-row-start و grid-row-end

HTML

CSS

بدون تعریف محل قرارگیری، می‌توانید ببینید که جایگذاری خودکار، هر آیتم را در سلول مخصوص به خود در شبکه قرار می‌دهد. یک چهارم (1fr) و سه چهارم (3fr) را اشغال می‌کنند. بیایید تمام عناصر سایت خود را با استفاده از خطوط شبکه مرتب کنیم. قوانین زیر را به انتهای CSS خود اضافه کنید:

CSS

حالا و روی ۱ / ۳ تنظیم شده‌اند، که یعنی از خط ۱ شروع می‌شوند و در خط ۳ تمام می‌شوند. همچنین می‌توانید از مقدار -۱ برای هدف قرار دادن خط ستون یا ردیف انتهایی استفاده کنید، سپس با استفاده از مقادیر منفی، از انتها به سمت داخل بشمارید. همچنین توجه داشته باشید که خطوط همیشه از لبه‌های شبکه صریح شمارش می‌شوند، نه شبکه ضمنی.

موقعیت‌یابی با grid-template-areas

یک روش جایگزین برای مرتب کردن آیتم‌ها در شبکه، استفاده از ویژگی grid-template-areas و اختصاص دادن نام به عناصر مختلف طرح است.

CSS

در اینجا ما از ویژگی grid-template-areas برای تعریف نحوه چیدمان ۳ ردیف استفاده می‌کنیم. ردیف اول دارای مقدار header header، ردیف دوم دارای مقدار sidebar content و ردیف سوم دارای مقدار footer footer است. سپس ما از ویژگی grid-area برای تعریف محل قرارگیری عناصر در grid-template-areas استفاده می‌کنیم. قوانین مربوط به grid-template-areas به شرح زیر است: - شما باید تمام سلول‌های شبکه را پر کنید. - برای اینکه دو سلول را پوشش دهید، نام را تکرار کنید. - برای خالی گذاشتن یک سلول، از علامت . (نقطه) استفاده کنید. - ناحیه‌ها باید مستطیلی باشند - برای مثال، نمی‌توانید یک ناحیه L شکل داشته باشید. - ناحیه‌ها را نمی‌توان در مکان‌های مختلف تکرار کرد. شما می‌توانید با طرح‌بندی ما بازی کنید، پاورقی را طوری تغییر دهید که فقط در زیر مقاله قرار گیرد و نوار کناری را طوری تغییر دهید که در تمام طول صفحه گسترده شود. این یک روش بسیار خوب برای توصیف یک طرح‌بندی است زیرا فقط با نگاه کردن به CSS مشخص است که دقیقاً چه اتفاقی می‌افتد.

شبکه‌ها و زیرشبکه‌های تودرتو

می‌توان یک شبکه را درون یک شبکه دیگر قرار داد و یک "زیرشبکه" ایجاد کرد. می‌توانید این کار را با تنظیم ویژگی روی یک آیتم در شبکه والد انجام دهید. بیایید با اضافه کردن یک ظرف برای مقالات و استفاده از یک شبکه تو در تو برای کنترل طرح‌بندی چندین مقاله، مثال قبلی را گسترش دهیم. در حالی که ما فقط از یک ستون در شبکه تو در تو استفاده می‌کنیم، می‌توانیم با استفاده از ویژگی grid-template-rows ردیف‌هایی را که با نسبت ۴:۳:۳ تقسیم می‌شوند، تعریف کنیم. این رویکرد به ما امکان می‌دهد طرحی ایجاد کنیم که در آن یک مقاله در بالای صفحه دارای نمایش بزرگ باشد، در حالی که بقیه دارای طرح‌بندی کوچک‌تر و شبیه پیش‌نمایش باشند.

CSS

برای آسان‌تر کردن کار با طرح‌بندی‌ها در شبکه‌های تو در تو، می‌توانید از subgrid روی ویژگی‌های grid-template-rows و grid-template-columns استفاده کنید. این به شما امکان می‌دهد از مسیرهای تعریف شده در شبکه والد استفاده کنید. در مثال زیر، ما از جایگذاری مبتنی بر خط استفاده می‌کنیم و شبکه تو در تو را قادر می‌سازیم تا چندین ستون و ردیف از شبکه والد را در بر بگیرد. ما subgrid را اضافه کرده‌ایم تا مسیرهای ستون شبکه والد را به ارث ببرد و در عین حال یک طرح‌بندی متفاوت برای ردیف‌های درون شبکه تو در تو اضافه کند.

CSS

چارچوب‌های شبکه‌ای

چارچوب‌های شبکه‌ای متعددی در دسترس هستند - اینها سیستم‌های CSS از پیش ساخته شده‌ای هستند که ویژگی‌هایی مانند شبکه‌های ۱۲ یا ۱۶ ستونی، کلاس‌های کاربردی برای فاصله‌گذاری و ترازبندی و طراحی واکنش‌گرا از طریق نقاط شکست را ارائه می‌دهند. خبر خوب این است که احتمالاً برای ایجاد طرح‌بندی‌های مبتنی بر شبکه به هیچ راه‌حل اختصاصی نیاز نخواهید داشت - همه مرورگرهای مدرن از استاندارد شبکه CSS پشتیبانی می‌کنند. مثال زیر نسخه ساده‌شده‌ای از آنچه چنین کدی ممکن است به نظر برسد را نشان می‌دهد. این مثال شامل یک کانتینر با یک شبکه ۱۲ ستونی است که با استفاده از تعریف شده است و همان نشانه‌گذاری را که در دو مثال قبلی استفاده کردیم، دارد. اکنون می‌توانیم از جایگذاری مبتنی بر خط برای قرار دادن محتوای خود در شبکه ۱۲ ستونی استفاده کنیم.

CSS

اگر از ابزار بررسی شبکه فایرفاکس برای همپوشانی خطوط شبکه در طرح خود استفاده کنید، می‌توانید ببینید که شبکه ۱۲ ستونی ما چگونه کار می‌کند.