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

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

مشکل

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

که محتوای آن‌ها به خوبی هماهنگ نیست" loading="lazy">

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

بیایید نحوه استفاده از Grid و Subgrid را برای به دست آوردن این نتیجه تحلیل کنیم.

مرحله 1: راه اندازی

در اینجا HTML اصلی برای نسخه ی نمایشی ما آمده است:

 < article > < section > </ section > < section > </ section > < section > </ section > </ article >

ما wrapper و <article> حاوی سه عنصر <section> داریم. <article> دارای CSS زیر است:

 article { display : grid ; grid-template-columns : 1 fr 1 fr 1 fr ; }

این CSS باعث می شود که عناصر <section> در سه ستون مرتب شوند.

هر <section> شامل <h1> ، <ul> و <div> است:

 < section > < h1 > </ h1 > < ul > </ ul > < div > </ div > </ section >

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

از ستون‌ها را گسترش نمی‌دهد" loading="lazy">

در هر ستون مقدار متفاوتی از محتوا وجود دارد، پس ارتفاع آنها یکسان به نظر نمی رسد.

مرحله 2: تنظیم صفحه نمایش: شبکه در بخش ها

ما فقط می‌توانیم از مقدار subgrid در عنصری استفاده کنیم که برای display: grid . همانطور که قصد داریم از subgrid برای تراز کردن محتوای عناصر <section> خود استفاده کنیم، پس باید آنها را به گونه ای تنظیم کنیم که display: grid first:

 section { display : grid ; }

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

در اینجا نسخه ی نمایشی به روز شده ما است.

توجه: محتوا به ارتفاع کامل کشیده می شود زیرا تنظیم پیش فرض برای ستون ها align-content: stretch است. (این برای این دمو مهم نیست، اما به هر حال ارزش توجه دارد!)

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

مرحله آخر این است که سه عنصر در هر ستون را در ردیف قرار دهیم. ابتدا ویژگی grid-template-rows روی subgrid قرار می دهیم:

 section { display : grid ; grid-template-rows : subgrid ; }

این نتیجه را در تصویر زیر ایجاد می کند.

اوه! اینجا چه مشکلی پیش آمده است؟ ما فقط می توانیم آخرین عنصر هر ستون را ببینیم.

مشکل این است که عنصر <article> ما فقط یک ردیف دارد، پس عناصر داخل هر بخش در آن ردیف روی هم قرار می گیرند.

آخرین گامی که باید برداریم این است که به محتوای زیرشبکه بگوییم که شامل سه ردیف باشد:

 section { display : grid ; grid-template-rows : subgrid ; grid-row : span 3 ; }

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

اما ببینید، بین هر ردیف شکاف هایی وجود دارد! به این دلیل که subgrid تنظیمات شکاف شبکه اصلی خود را به ارث می برد. ما می توانیم آن را با تنظیم یک مقدار gap متفاوت تغییر دهیم. اگر gap: 0 به عناصر <section> خود اعمال کنیم، نتیجه نهایی مورد نظر را می گیریم.

از زیرشبکه را در بر می گیرد" loading="lazy">

در اینجا نسخه ی نمایشی تکمیل شده ما است.

به عنوان یک نکته جانبی، یک جایگزین برای grid-row: span 3 grid-row: 1 / 3 خواهد بود.

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

همانطور که در سایت caniuse توضیح داده شد، از اواخر سال 2023، subgrid در تمام مرورگرهای اصلی کار کرده است. پس قطعاً شروع به استفاده از subgrid در حال حاضر امکان پذیر است.

برای مرورگرهایی که از Grid پشتیبانی می کنند اما از ساب گرید پشتیبانی نمی کنند، احتمالاً نتیجه قابل قبولی دریافت خواهید کرد. نسخه ی نمایشی اصلی ما در بالا کاملاً قابل قبول بود، اگرچه تراز افقی محتوا زیباتر به نظر می رسد.

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

نتیجه

مقدار subgrid را می توان برای grid-template-columns و/یا grid-template-rows تنظیم کرد که به محتوای زیرشبکه اجازه می دهد با ستون ها و ردیف های شبکه های والد هماهنگ شود. همانطور که می بینید، subgrid بسیار آسان برای استفاده است، اما یک گفت نی قدرتمند و بسیار مورد نیاز برای چیدمان های Grid است.

برای کسب اطلاعات بیشتر در مورد تمام کارهایی که می توانید با subgrid انجام دهید، منابع زیر را تحلیل کنید:

خبرکاو