زیرشبکه CSS را یاد بگیرید

اگرچه شبکه CSS یکی از بزرگ‌ترین افزوده‌ها به CSS بود، اما یک چیز مهم را از دست داد و آن این بود که یک عنصر ستون‌ها یا ردیف‌ها را از والد خود به ارث ببرد. CSS subgrid می تواند در این زمینه به ما کمک کند. سال‌هاست که درخواست شده است، و حالا که فایرفاکس و پیش‌نمایش فناوری سافاری از آن پشتیبانی می‌کنند، فکر کردم آن را امتحان کنم.

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

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

قبل از اینکه به هر چیزی بپردازم، می‌خواهم تاکید کنم که زیرشبکه در Firefox v71+ و Safari Technology Preview پشتیبانی می‌شود. ما می توانیم آن را به عنوان یک بهبود با CSS استفاده کنیم @supports یا برای ارائه یک گزینه بازگشتی.

مشکل

فرض کنید طرح زیر را داریم. عنوان، توضیحات و تصویر دارد. وقتی عنوان و متن توضیحات یکسان باشند، هر دو تصویر به درستی ردیف می شوند.

با این حال، زمانی که توضیحات طولانی‌تر شود، تصویر را پایین می‌آورد و در نتیجه تصاویر دیگر تراز نمی‌شوند.

اینجاست که زیرشبکه CSS به کار می آید! بیایید راه حل را بررسی کنیم.

راه حل: از یک زیر شبکه استفاده کنید

ما می خواهیم محتوا را به سه خط تقسیم کنیم و مطمئن شویم که آنها با یکدیگر هماهنگ هستند. فرض کنید نشانه گذاری زیر را داریم.

div class="wrapper">
  div class="item">
    
  div>
  div class="item">
    
  div>
div>

در CSS، بخش را به صورت زیر به دو ستون و سه ردیف تقسیم می کنیم:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
}

.item {
  grid-row: 1 / 4;
}

در اینجا توضیح تصویری از آنچه در بالا به نظر می رسد ارائه شده است.

ممکن است فکر کنید که خطوط شبکه برای عناصر داخلی (عنوان، توضیحات و تصویر) هستند. با این حال این خطوط شبکه برای پوسته اصلی هستند، و فقط .item عنصر به آنها دسترسی دارد. این بدان معنی است که عنوان، توضیحات و تصویر با این خطوط محاسبه نمی شود.

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

ما باید ردیف های شبکه را به عناصر داخلی منتقل کنیم و اینجا CSS است subgrid shines برای پیاده سازی آن باید موارد زیر را به آن اضافه کنیم .item عنصر

.item {
  
  grid-row: 1 / 4;

  
  display: grid;

  
  grid-template-rows: subgrid;
}

هنگام استفاده subgrid، این یک نوع اجاره است .item ارث بردن grid-template-columns ارزش از والد خود (The .wrapper). با این کار شبکه به این شکل در می آید.

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

این بسیار مفید است و راه های بیشتری را برای دستیابی به آنچه قبلاً با شبکه CSS ممکن نبود به ما می دهد.

تئوری بس است بیایید نگاهی به چند مورد استفاده بیندازیم!

از موارد و مثال استفاده کنید

طرح تحریریه: قسمت 1

در این مثال، ما یک طرح 3 ستونی داریم که شامل موارد زیر است:

• عنوان
• کارت ویژه
• کارت معمولی

در اینجا علامت گذاری اساسی است.

section class="section">
  h2>Headlinesh2>
  div class="card card--featured">div>
  div class="card">div>
section>

با توجه به شکل زیر طراحی به گونه ای ساخته شده است که 5 ستون در نظر گرفته شود. همه عناصر اصلی یک ستون را اشغال می کنند، به جز ستون میانی که 3 ستون را اشغال می کند.

.section {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
}

.card--featured {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

اینم امتیاز تا اینجا هنوز هم کامل نیست. تصویر کوچک نقشه برجسته با شروع ستون سوم تراز نیست.

اینجاست که زیرشبکه وارد عمل می شود. در اینجا نشانه گذاری نقشه برجسته است:

div class="card--featured">
  div class="card--featured__content">div>
  div class="card--featured__thumb">div>
div>

برای اینکه کنترل زیادی روی آن داشته باشید card--featured عنصر، باید ستون های شبکه را به عناصر محتوا و انگشت شست منتقل کنیم.

ابتدا باید مطمئن شویم که نقشه ارائه شده از ستون های 2 تا 5 می باشد. سپس اضافه می کنیم display: grid و subgrid به عنوان یک ارزش برای grid-template-columns.

.card--featured {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: subgrid;
}

اینجا! در حال حاضر .card--featured عنصر به ارث رسیده است 3 ستون از پوسته اصلی. با این کار می‌توانیم تصویر کوچک و محتوا را بر اساس این ستون‌ها نمایش دهیم.

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

.card--featured {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: subgrid;
}

.card--featured__thumb {
  grid-column: 2 / 4;
}

به لطف زیرشبکه، اکنون تصویر کوچک کاملاً با ستون های لفاف اصلی هماهنگ شده است!

زیرشبکه CSS را می توان به ارث برد

این مانند مثال قبلی است، اما با یک بخش اضافی. در بلوک مرکزی، فهرستی از سه مقاله کوچک اضافه کردم. من آنها را “minis” نامیدم زیرا آنها فقط یک عنوان دارند.

شکل زیر را در نظر بگیرید.

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

کار بر روی این به روز رسانی به برخی تغییرات نشانه گذاری نیاز دارد. بیایید آن را در زیر بررسی کنیم.

div class="featured-section">
  div class="card--featured">
    div class="card--featured__content">div>
    div class="card--featured__thumb">div>
  div>
  ul class="list">ul>
div>

.featured-section {
  grid-column: 2 / 5;
  display: grid;
  grid-template-columns: subgrid;
}

.card--featured {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / 4;
}

.card--featured__thumb {
  grid-column: 2 / 4;
}

.list {
  grid-column: 1 / 4;
}

به طور خلاصه:

• من حرکت کردم grid-column: 2 / 5 به .featured-section زیرا فرزند مستقیم شبکه اصلی است.
• اضافه شد grid-column: 1 / 4 به .list عنصری که باعث می شود فضای کامل والد خود (زیرشبکه) را اشغال کند.

در مرحله بعد باید زیرشبکه را روی عناصر داخلی آن اعمال کنیم .list، بنابراین ما می توانیم آنها را به طور کامل با تصویر کوچک نقشه برجسته قرار دهیم.

.list {
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: subgrid;
}

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

footer class="site-footer">
  div class="wrapper">
    div class="site-footer__item">
      h2>h2>
      ul>
        
      ul>
    div>
    div class="site-footer__item">div>
    div class="site-footer__item">div>
    div class="site-footer__item">div>
  div>
footer>

در شکل بالا می‌خواهم عناوین بخش‌ها با هم تراز شوند. اگر عنوانی بیش از حد طولانی شود، قد همه افزایش می‌یابد تا با خواهر یا برادر خود که طولانی‌تر شده است، مطابقت داشته باشد. بدون زیرشبکه، در نهایت به چیزی شبیه به این خواهیم رسید:

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

.site-footer .wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 2rem;
}

.site-footer__item {
  grid-row: span 2;
}

برای پیاده سازی زیرشبکه، تنها چیزی که نیاز داریم موارد زیر است:

.site-footer__item {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  grid-gap: 1rem;
}

به این توجه کنید grid-gap به ارث رسیده است .site-footer .wrapper اما برای داشتن فضای کمتر باید آن را لغو کنم.

گالری عکس

یکی دیگر از موارد استفاده از زیرشبکه جالب، گالری عکس است. در این مثال، من یک شبکه شش ستونی و یک پوسته دارم که شامل دو بخش اصلی (محتوا و تصاویر) است.

الزامات طراحی:

• عکس ها را با شبکه اصلی تراز کنید
• حتی فاصله بین عکس ها و دو زبانه اصلی

نشانه گذاری زیر را در نظر بگیرید.

div class="section">
  div class="wrapper">
    div class="start">div>
    div class="end">
      img src="thumb.jpg" alt="" />
      img src="thumb.jpg" alt="" />
      img src="thumb.jpg" alt="" />
      img src="thumb.jpg" alt="" />
      img src="thumb.jpg" alt="" />
    div>
  div>
div>

با توجه به موارد فوق، باید موارد زیر را در CSS انجام دهیم:

.start {
  grid-column: span 3;
}

.end {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
  grid-gap: 1rem;
}

img:nth-child(3) {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

img:nth-child(4) {
  grid-column: 1 / 3;
}

توجه داشته باشید که المان های فرزند زیرشبکه اکنون بر اساس یک خط شبکه جدید (از 1 تا 4) قرار گرفته اند.

تکرار شبکه

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

جالب است که ما می توانیم یک ظرف جعلی با عناصر خالی ایجاد کنیم و آن را در پشت شبکه خود قرار دهیم. شاید تعجب کنید که چرا؟ خوب، ما می‌توانیم کارهای مختلفی با آن انجام دهیم، مانند جلوه‌های بصری، سوئیچینگ شبکه برای اهداف اشکال‌زدایی و بسیاری موارد دیگر.

شکل زیر را در نظر بگیرید:

آن مربع های کوچک را می بینید؟ آنها نمایانگر شبکه ای هستند که ما داریم و من آنها را عمدا ایجاد کردم.

قبل از اینکه به نحوه ساخت آنها بپردازم، بیایید نگاهی به HTML و CSS بیندازیم:

section class="section">
  div class="content content-1">div>
  div class="content content-2">div>
  div class="fake-grid">
    
  div>
section>

.section {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 3px;
}

.content-1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.content-2 {
  grid-column: 5 / 7;
  grid-row: 1 / 3;
}

اول، من به راهی نیاز داشتم تا شبکه ساختگی را در زیر محتوا قرار دهم. خوشبختانه، با شبکه CSS، ما برای این کار نیازی به موقعیت یابی مطلق نداریم. با کمک 1 / -1 برای ستون‌ها و ردیف‌ها، به مرورگر می‌گوییم که شبکه جعلی تمام عرض و ارتفاع والد را اشغال کند.

.fake-grid {
  --debug-mode: 1;
  display: grid;

  
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;

  
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  
  opacity: var(--debug-mode);
}

در نهایت باید اضافه کنیم z-index: 1 برای اطمینان از اینکه محتوا همیشه بالای شبکه جعلی قرار دارد.

این مثالی است از اینکه چگونه یک زیرشبکه برای تقلید از یک شبکه و قرار دادن آن در زیر محتوا به دلایل بصری یا اشکال زدایی مفید است. با جاوا اسکریپت می توانیم مقدار را تغییر دهیم --debug-mode برای نشان دادن یا پنهان کردن این شبکه!

حتی بهتر از آن، ما می توانیم همین کار را در CSS :has انجام دهیم!

:root {
  --debug-mode: 1;
}

html:has(option[value="on"]:checked) {
  --debug-mode: 1;
}

در این مقاله می توانید درباره CSS :has اطلاعات بیشتری کسب کنید.

نتیجه گیری

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

ممنون که خواندید.