زیرشبکه CSS

شبکه CSS یک موتور چیدمان بسیار قدرتمند است، اما مسیرهای سطر و ستون ایجاد شده در یک شبکه والد را فقط می توان برای قرار دادن مستقیم فرزندان در ظرف شبکه استفاده کرد. هر نویسنده ای که مناطق و خطوط شبکه نامگذاری شده را تعریف می کرد، در هر عنصر دیگری غیر از یک فرزند مستقیم گم می شد. با subgrid ، اندازه آهنگ، الگوها و نام ها را می توان با شبکه های تودرتو به اشتراک گذاشت. این مقاله نحوه عملکرد آن را توضیح می دهد.

قبل از زیرشبکه، محتوا اغلب با دست طراحی می‌شد تا از طرح‌بندی‌های ناهموار مانند این جلوگیری شود.

سه کارت در کنار هم نشان داده شده اند که هر کدام دارای سه بیت محتوا هستند: هدر، پاراگراف و پیوند. هرکدام دارای طول متن متفاوتی هستند و در کنار هم قرار گرفتن کارت‌ها، صف‌بندی‌های نامناسبی را ایجاد می‌کنند.

پس از زیرشبکه، تراز کردن محتوای با اندازه متغیر امکان پذیر است.

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

پشتیبانی مرورگر

  • 117
  • 117
  • 71
  • 16

منبع

مبانی زیرشبکه

در اینجا یک مورد استفاده ساده است که اصول subgrid CSS را معرفی می کند. یک شبکه با دو ستون نام‌گذاری شده تعریف می‌شود، اولین ستون 20ch عرض و دومی «بقیه» فضای 1fr است. نام ستون ها الزامی نیست، اما برای اهداف تصویری و آموزشی عالی هستند.

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: [column-1] 20ch [column-2] 1fr;
}

سپس، یک فرزند از آن شبکه، آن دو ستون را در بر می گیرد، به عنوان یک محفظه شبکه تنظیم می شود و با تنظیم grid-template-columns به subgrid ، ستون های والد خود را می پذیرد.

.grid > .subgrid {
  grid-column: span 2;

  display: grid;
  grid-template-columns: subgrid; /* 20ch 1fr */
}
تصویری از CSS Grid DevTools که دو ستون را در کنار هم با نامی در ابتدای خط ستون خود نشان می‌دهد.
https://codepen.io/web-dot-dev/pen/NWezjXv

تمام است، ستون های یک شبکه والد به طور موثر از یک سطح به یک زیرشبکه منتقل شده اند. این زیرشبکه اکنون می تواند فرزندان را به هر یک از آن ستون ها اختصاص دهد.

چالش! همان نسخه ی نمایشی را تکرار کنید، اما این کار را برای grid-template-rows انجام دهید.

شبکه "ماکرو" سطح صفحه را به اشتراک بگذارید

طراحان اغلب با شبکه های مشترک کار می کنند، خطوطی را روی کل طرح می کشند و هر عنصری را که می خواهند با آن تراز می کنند. اکنون توسعه دهندگان وب نیز می توانند! اکنون می توان به این گردش کار دقیق و به علاوه موارد دیگر دست یافت.

از شبکه ماکرو تا طراحی نهایی. نواحی با نام شبکه از قبل ایجاد می شوند و اجزای بعدی به دلخواه قرار می گیرند.

پیاده‌سازی رایج‌ترین گردش کار شبکه طراح می‌تواند بینش بسیار خوبی در مورد قابلیت‌ها، جریان‌های کاری و پتانسیل‌های subgrid ارائه دهد.

در اینجا یک اسکرین شات از Chrome DevTools از شبکه ماکرو طرح‌بندی صفحه تلفن همراه گرفته شده است. خطوط دارای نام هستند و مناطق واضحی برای قرار دادن اجزا وجود دارد.

تصویری از Chrome CSS Grid DevTools که یک طرح‌بندی شبکه‌ای در اندازه تلفن همراه را نشان می‌دهد که در آن ردیف‌ها و ستون‌ها برای شناسایی سریع نام‌گذاری شده‌اند: fullbleed، system-status، first-nav، main-header، main، footer و system-getures.

CSS زیر این شبکه را با ردیف‌ها و ستون‌های نام‌گذاری شده برای چیدمان دستگاه ایجاد می‌کند. هر سطر و ستون یک اندازه دارد.

.device {
    display: grid;
    grid-template-rows:
      [system-status] 3.5rem
      [primary-nav] 3rem
      [primary-header] 4rem
      [main] auto
      [footer] 4rem
      [system-gestures] 2rem
    ;
    grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}

برخی از سبک های اضافی طرح زیر را ارائه می دهند.

همان پوشش شبکه CSS DevTools مانند قبل، اما این بار با برخی از رابط کاربری سیستم تلفن همراه، برخی از سایه ها و کمی رنگ. کمک می کند تا ببینید طراحی به کجا می رود.

در داخل این والد، عناصر مختلف تودرتو وجود دارد. طراحی به یک تصویر با عرض کامل در زیر ردیف‌های nav و header نیاز دارد. دورترین نام خطوط ستون چپ و راست fullbleed-start و fullbleed-end هستند. نامگذاری خطوط شبکه به این ترتیب به کودکان امکان می دهد تا به طور همزمان با هر یک از آنها با مختصر قرار دادن fullbleed هماهنگ شوند. همانطور که به زودی خواهید دید بسیار راحت است.

تصویر بزرگنمایی شده از همپوشانی شبکه از DevTools، که به طور خاص بر روی نام ستون‌های fullbleed-start و fullbleed-end تمرکز دارد.

با طرح کلی دستگاه که با ردیف‌ها و ستون‌های نام‌گذاری شده زیبا ایجاد شده است، از subgrid برای ارسال ردیف‌ها و ستون‌ها با نام خوب به طرح‌بندی‌های شبکه تودرتو استفاده کنید. این لحظه جادویی subgrid است. طرح‌بندی دستگاه، ردیف‌ها و ستون‌های نام‌گذاری‌شده را به کانتینر برنامه ارسال می‌کند و سپس آن را به هر یک از فرزندان خود ارسال می‌کند.

.device > .app,
.app > * {
    display: grid;
    grid: subgrid / subgrid;

    /* same as */
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
}

زیرشبکه CSS مقداری است که به جای لیستی از تراک های شبکه استفاده می شود. سطرها و ستون‌هایی که عنصر از والد خود در بر می‌گیرد، اکنون همان ردیف‌ها و ستون‌هایی هستند که ارائه می‌کند. این باعث می شود که نام خطوط از شبکه .device . به جای فقط .app در دسترس فرزندان .app باشد. عناصر داخل .app قادر به ارجاع به مسیرهای شبکه ایجاد شده توسط .device قبل از شبکه فرعی نبودند.

با این همه تعریف، تصویر تودرتو به لطف subgrid اکنون می‌تواند در طرح‌بندی به صورت کامل نمایش داده شود. بدون ارزش یا ترفند منفی، در عوض یک خط زیبا که می‌گوید «طرح‌بندی من از fullbleed-start تا fullbleed-end است.»

.app > main img {
    grid-area: fullbleed;
}
طرح‌بندی ماکرو تمام‌شده، با یک تصویر تودرتو با عرض کامل که به‌درستی از ردیف‌های پیمایش اصلی و سرصفحه خارج می‌شود و به هر یک از خطوط ستون نام‌گذاری شده کامل کشیده می‌شود.
https://codepen.io/web-dot-dev/pen/WNLyjzX

در اینجا شما آن را دارید، یک شبکه ماکرو مانند استفاده از طراحان، که در CSS پیاده سازی شده است. این مفهوم می تواند در صورت نیاز با شما مقیاس و رشد کند.

پشتیبانی را بررسی کنید

بهبود پیشرونده با CSS و زیرشبکه آشنا و ساده است. از @supports استفاده کنید و در داخل پرانتز از مرورگر بپرسید که آیا زیرشبکه را به عنوان مقداری برای ستون‌ها یا ردیف‌های الگو درک می‌کند. مثال زیر بررسی می کند که آیا ویژگی grid-template-columns از کلمه کلیدی subgrid پشتیبانی می کند یا خیر، که اگر درست باشد، به این معنی است که زیرشبکه می تواند استفاده شود.

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

کروم، اج، فایرفاکس و سافاری همگی دارای ابزارهای توسعه شبکه CSS عالی هستند و کروم، اج و فایرفاکس ابزارهای خاصی برای کمک به زیرشبکه دارند. کروم ابزارهای خود را در 115 معرفی کرد در حالی که فایرفاکس آنها را برای یک سال یا بیشتر در اختیار داشته است.

پیش نمایش تصویر از نشان زیرشبکه موجود در عناصر در پانل عناصر.

نشان زیرشبکه مانند نشان شبکه عمل می کند اما به صورت بصری تشخیص می دهد که کدام شبکه ها زیرشبکه هستند و کدام شبکه نیستند.

منابع

این فهرست مجموعه‌ای از مقالات زیرشبکه، دموها و الهام‌بخش کلی برای شروع است. اگر به دنبال مرحله بعدی برای آموزش زیرشبکه خود هستید، از کاوش در همه این منابع عالی لذت ببرید!

بخشی از سری جدید قابلیت همکاری