گرید CSS — لایه ها و اجزاء رسپانسیو

چهارشنبه ۰۷ شهریور ۹۷ توسط محمدسینا مرادی

سلامی دوباره! 👋 امروز می خواهیم درباره لایه های رسپانسیو ای که از گرید CSS استفاده می کنند صحبت کنیم.

در این مقاله، ما می خواهیم یک گالری عکس بسازیم (بر روی شبکه اجتماعی ساختگی مان برای سگ ها) و من قصد دارم به شما نشان دهم که چگونه دو نوع لایه مختلف را سازماندهی کنید:

  • لایه هایی با تکرار اجزاء
  • و چگونگی ساخت اجزاء رسپانسیو

البته ما با توله سگ ها (پاپی های کوچولو! {-:) چسبیده شدیم، 🐶 پس بیایید من پدی برادر لولا را به شما معرفی کنم. این توله (پدی) زمانی که زیاد مشغول خوردن اسباب بازی هایش نیست بسیار آرام و با مزه است، عکس زیر را مشاهده کنید تا بیشتر با او آشنا شوید. :)

بدون اطلاعات بیشتر دیگری، بیایید به درون لایه ها پرش کنیم.

لایه هایی با تکرار اجزاء

شما مشق تان را به خوبی می دانید. اولین چیزی که باید انجام دهید راه اندازی گرید تان با display: grid; است، پس شما می توانید کار کردن روی آن را شروع کنید.

ساختار HTML برای گالری یک div است، container جایی است که ما ویژگی های گرید را تنظیم می کنیم. داخل آن، چند آیتم div با عکس هایی داخلش هستند (بنابراین ما می توانیم سلول ها را به خوبی ببینیم).

همانطور که می توانید در پیش نمایش بالا ببینید، ما یک گرید با یک ستون و gap با 10 پیکسل داریم. آیتم ها در گرید ارتفاع خودشان را از تصاویر داخل شان می گیرند و زمانی که بخواهند کشش پیدا کنند همه عرض گرید را اشغال می کند.

زمانی که آن به ترازبندی ها (alignments) می آید، مقدار پیش فرض همیشه کشش آمدن است (چه ما درباره آیتم های گرید، track های آن یا خودش صحبت کنیم). شما می توانید این را با ویژگی هایی که بسیار با چیزی که به CSS Flexbox شبیه است تغییر دهید. ما در اینجا نمی خواهیم آن را بررسی کنیم، اما شما می توانید آن را در CSS Tricks Guide to Grid چک کنید که این موضوع را در شکل بسیار سازماندهی و ویژوال ای توضیح می دهد.

برای حالا، بیایید به عکس ها مان عرض 100 درصد بدهیم، با دادن این مقدار یک بار به گرید، همه آنها تنظیم خواهند شد. مانند گیف زیر:

پدی واقعا بسیار شایان ستایش است که ما با بازردن صفحه با سرعت مقدار زیادی از عکس های او را می بینیم! 🐶 این به این معنی است که ما نیاز داریم مقداری ستون را بسازیم. پس بیایید لایه ای بسازیم که 4 ستون برابر دارد و ببینیم که چگونه کار می کند.

خیلی انعطاف پذیر نیست، درسته؟ منظورم این بود که واقعا عالی به نظر می رسد. تا زمانی که کسانی وبسایت را در تلفن هایشان باز کنند می بینند که پدی ظاهرا یک مورچه به نظر می رسد.

ما می توانیم این مشکل را باکمک دوست قدیمی مان minmax() بهبود بخشیم، این کار باعث می شود تا اطمینان حاصل کنیم که عکس ها کمتر از 200px نمی شوند.

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

به نظر می رسد ما باید درصدی نیز با media-queries کار کنیم!

یک خبر خوب: گرید کلماتی جادویی دارد که همه چیز را برای تان انجام می دهد! 🙌 به جای مشخص کردن تعداد محدودی از ستون ها، ما می توانیم ویژگی های سایز دهی را برای track ها تعریف کنیم و به گرید اجازه دهیم تا مقداری که نیاز دارد را محاسبه و بگیرد. اگر شما تا الان در مورد  auto-fill و auto-fit چیزی نشنیده اید، خودتان را آماده کنید چون در عشق غرق خواهید شد! 💕

auto-fill
با دادن حداقل سایز track، تعداد تکرار track به بزرگترین عدد ممکن خود می رسد اما تا زمانی که مشکلی با گرید مانند سرریز شدن container اتفاق نیفتد.

auto-fit
رفتار اولیه اش مانند همان auto-fill است.

بعد از اینکه همه آیتم ها قرار داده شدند، اگر آنجا هر track خالی ای وجود داشته باشد، آن track ها سقوط می کنند. این به این معنی است که آن track ها مثل این رفتار می کنند که از یک تابع سایز دهی 0 پیکسل پیروی می کنند و gutter ها (یا هر فاصله گذاری اتوماتیک دیگر) دور آن سقوط می کنند.

این بدان معناست که در عمل اگر شما از auto-fill به عنوان عدد تکرار استفاده کنید می توانید به track های خالی پایان دهید، چون این، track های زیادی را در فضای موجود تا جایی که امکان داشته باشد ایجاد می کند. اگر شما از auto-fit استفاده کنید، track  های خالی ناپدید می شوند و به بقیه اجازه می دهد تا فضای باقی مانده را گسترش دهند.

حالا ما یک رفتار رسپانسیو خوب برای عرض های مختلف صفحه داریم و از هیچ media query استفاده نکردیم.

با این حال، ممکن است متوجه شده باشید که تصاویر با ابعاد مختلف، فضاهای خالی داخل container خود را ترک می کنند. قبل از اینکه بتوانیم آن را حل کنیم، باید ارتفاع را به ردیف شبکه اختصاص دهیم. (به شما خواهم گفت که چرا در یک دقیقه.)

اما ما نمی دانیم که چقدر ردیف داریم! 🙀

گرید Implicit

زمانی که ما آیتم های بیشتری نسبت سلول های قالب داریم، گرید track ها را به طور خودکار ایجاد می کند. خوشبختانه، ما می توانیم رفتاری را برای آن track ها (ردیف ها و ستون ها) مشخص کنیم که با استفاده از grid-auto-rows و grid-auto-columns به صورت خودکار تولید می شوند. بخاطر اهداف این مقاله، ما زیاد درونش نرفته ایم! بیایید به آنها دو مقدار متفاوت px بدهیم، بنابراین ما می توانیم ببینیم که الگو چگونه با ردیف های ساخته شده تکرار می شود.

حالا عکس ها حتی فضای خالی بیشتری در container می گذارند و ما نمی توانیم آن ها را کشش بدهیم. در واقع می توانیم اما من واقعا دوست ندارم پدی به این شکل در بیاید:

ما نمی توانیم از ویژگی های ترازبندی آیتم های گرید به صورت مستقیم در المنت های مدیا استفاده کنیم، اما می توانیم از ویژگی object-fit برای مشخص کردن چگونگی اینکه <img> یا <video> باید تغییر سایز دهند تا اینکه در container متناسب شوند استفاده کنیم. اگر ما آن را روی cover تنظیم کنیم، عکس ها تمام container خود را پر می کنند بدون اینکه فاصله ای به جا بگذارند و هیچ یک از شکل طبیعی نیز نمی افتند.

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

همینه! ما یک لایه بسیار رسپانسیو بدون هیچ media queries داریم، ما فقط از چند خط کد بسیار ساده CSS استفاده کردیم. ⚡️

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

خب، بله، ما مقداری گالری عکس مان را ادویه دار کرده ایم، اما ما همچنین کمی حفره را نیز اضافه کرده ایم که به نظر خوب نیست. 😐

ویژگی grid-auto-flow اجازه می دهد تا ترتیب جایگذاری آیتم ها در گرید را تغییر دهیم. شما می توانید مقدار آن را روی ردیف (مقدار پیش فرض) یا ستون تنظیم کنید یا به صورت افقی یا عمودی آن را در گرید پر کنید، همچنین شما می توانید آن را روی dense تنظیم کنید. با ساختن این، گرید تلاش خواهد کرد که حفره های ایجاد شده را برطرف کند. به خاطر داشته باشید که این کار باعث می شود که آیتم ها خارج از ترتیب خودشان باشند.

حالا ما یک گالری داریم که کاملا رسپانسیو، پر از توله سگ های کوچولو 🐶 {-: و از همه مهم تر که فقط 25 خط کد CSS در آن استفاده شده است!

دیگر چه می خواهید؟ 🎁

اجزاء رسپانسیو

ما یک سناریو را دیدیم که لایه دارای اجزای تکرار شده مشابه ای بود. حالا می خواهیم ببینیم که چگونه اجزای رسپانسیو را بدون هیچ تکراری در بخش ها بسازیم.

برای این مثال، ما کارت ها را با جزئیات بشتری در مورد بعضی از عکس ها می سازیم این جزئیات شامل نام نویسنده و آواتار، توضیحات عکس، تاریخ و یک دکمه علاقه مندی می باشد.

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

من قبلا از اصول (ستون ها، ردیف ها و gap ها) مراقبت کرده ام، چون می دانم حالا شما نیز برای خودتان یک متخصص عالی هستید!

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

خب، بیایید محتوا را جایگذاری کنیم.

عکس باید grid-column: 1 / 1 / span 3 / 2 ، آواتار باید  grid-area: 1 / 2 / span 1 / span 1; و توضیحات نیز باید grid-area: 2 / 3 / span 2 / auto را داشته باشد.

این مقدار بزرگی از کار است! 🙈 و سپس ما باید دوباره همه را برای لایه عمودی از نو بنویسیم! آنچه ما باید انجام دهیم این است که مناطق را با گرید مان تعریف کنیم. 

برای این کار، ما از ویژگی grid-template-areas استفاده می کنیم. این به شما اجازه می دهد که برای سلول های گرید تان نام انتخاب کنید. اگر چندین سلول را با یک کلمه کلیدی نامگذاری کنید، شما یک منطقه را در گرید تان ایجاد می کنید که از چند track استفاده می کند. ما 4 ستون و 3 ردیف داریم، پس بیایید مناطق را بر همان اساس نام گذاری کنیم. برای سلول هایی که می خواهیم خالی باشند، fullstop را بنویسیم. زمانی که ما جایگذاری اشیاء را شروع می کنیم، هیچ چیزی درون آن سلول ها نمی روند.

لطفا توجه داشته باشید: مناطق گرید فقط می توانند شکل خطی یا مستطیل به خود بگیرند. شما نمی توانید مناطق L یا T شکل بسازید، این باعث می شود که کار نکند! گرید زمانی که بخواهد یک عکس را بر T جایگذاری کند خیلی گیج می شود، پس بیایید همکاری کنیم.

اینجا مناطقی هستند که ما برای این جزء نیاز داریم:

ما مناطق گرید را مطابق بخش های مان نام گذاری می کنیم اما چیزی منتقل نمی شود، می دانم. حالا ما باید هر آیتم را با یک منطقه تطابق دهیم.

 ویژگی grid-area را به یاد دارید؟ این ویژگی فقط عدد ها و span ها را به عنوان مقدار نمی گیرد. آن کلمات را نیز می گیرد! کلماتی که ما از آن در  grid-template-areas استفاده کردیم.

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

تصویر زیر هنگامی است که همه آیتم ها جایگذاری شده اند:

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

  • اول، شما باید گرید موبایل تان را تعریف کنید. در موردی که می خواهیم انجام دهیم، ما فقط گرید را به جای 4 ستونه، 3 ستونه می سازیم.
  • سپس، شما گرید قالب مناطق خود را دوباره برای گرید جدید تعریف می کنید.

در تصویر زیر می بینید که ما چه کاری می کنیم:

ما یک گرید را با 3 ستون برای صفحاتی کوچک تر از 600 پیکسل تعریف کرده ایم. شاید شما متوجه شده باشید که عکس ناپدید می شود. این بدترین چیزی است که می تواند در مورد یک عکس در کارت ها اتفاق بیفتد! 🚒

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

هنگامی که صفحه نمایش کوچک می شود، ساختار شبکه و مناطق نیز تغییر می کند. اما آیتم ها همیشه به یک منطقه منطبق شده اند، به طوری که آنها بدون نیاز به دادن دستورالعمل های خاص، خود را تغییر می دهند. تصور كنيد كه media query ها را نیز برای هر آيتم بنويسيد ... 😴

نه تنها این، شما متوجه شده اید که ما همچنین هیچ تغییری را در HTML ایجاد نکرده ایم؟ ما اغلب مجبوریم دو ساختار HTML مختلف برای هر مولفه بنویسیم. چیز جالبی در مورد Grid این است که ما می توانیم آیتم ها را در هر جهت قرار دهیم، مهم نیست که آنها چگونه در DOM سفارش داده شده اند.

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

پایان کار🚩

به چند خط زیر توجه کنید:

با استفاده از CSS Grid، می توانید نظم المنت ها را بدون ویرایش این المنت ها در DOM مرتب کنید. این استقلال سفارش دهنده منبع و همچنین یکی از بزرگترین ویژگی های گرید است.
1. تنظیمات لایه کاملا مستقل از ساختار است.
2. ما مجبور نیستیم یک المنت را چندین بار بنویسیم تا آرایش های مختلفی به آن بدهیم.
سازماندهی بیشتر، تعمیر و نگهداری ساده تر و کار کمتر برای ما!

این codepen یک مثال مشابه لایه ای که ما استفاده کردیم را دارد و از گرید و Flexbox استفاده کرده است تا مقایسه ای بین این دو نیز انجام شود. Flexbox حدود 40 خط و بسیاری از media query ها را استفاده کرده ولی گرید از 5 خط استفاده کرده است. البته این برای هر لایه ای متفاوت است.

اگر شما هیچ ویژگی (auto-rows و auto-columns) برای گرید implicit مشخص نکنید، این کار باعث می شود که از گرید explicit که شامل template-rows و template-columns می شود تقلید کند. لطفا توجه داشته باشید که شما می توانید هر دوی آنها را در یک container تعریف کنید.

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

ادامه مطالعه در این مورد

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

البته، بسیاری از گزینه های مختلف برای تعریف رفتار رسپانسیو مورد نظر شما وجود دارند. این گالری عکس به عنوان مثال برای نشان دادن چندین ویژگی و مقادیر CSS Grid مورد استفاده قرار گرفت و پتانسیل خود را برای حل این مشکلات با سرعت و کارآمد نشان داد. چالش هایی که به آنها برخوردید و راه حل هایی که برای آنها استفاده کردید را برای ما ارسال کنید! خیلی خوشحال می شویم!

امیدوارم از پدی خوشتان آمده باشد! {-:


کلیدواژه: CSS طراحی رسپانسیو طراحی وب

منابع: medium.com

ارسال دیدگاه:
برای ارسال دیگاه باید به سیستم وارد شوید و یا ثبت نام کنید. ثبت نام چند لحظه بیشتر زمان شما را نمیگیرد.