نکته سریع: نحوه تراز کردن ردیف های ستون با زیرشبکه CSS
در این نکته سریع، نحوه استفاده از ویژگی زیرشبکه 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
انجام دهید، منابع زیر را تحلیل کنید:
ارسال نظر