طراحی شبکه تصاویر واکنش گرا با CSS Grid Layout – طرح‌بندی CSS گرید از صفر تا صد

شما به عنوان یک توسعه‌دهنده فرانت‌اند حتماً تاکنون تجربیاتی در زمینه CSS داشته‌اید، اما اغلب ما این روزها کار با CSS را از طریق فریمورک‌هایی مانند Bootstrap انجام می‌دهیم. برخی موقعیت‌ها وجود دارند که مجبور خواهیم بود مستقیماً با CSS کار کنیم و یکی از آن‌ها مواردی است که بخواهیم با سیستم CSS Grid Layout کار کنیم. در این مقاله به طور عمده در مورد شیوه استفاده از طرح‌بندی CSS گرید و آموزش CSS Grid جهت ساختن یک شبکه از تصاویر صحبت خواهیم کرد.

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

طرح‌بندی CSS گرید به چه معنی است؟

Grid Layout در CSS یک سیستم طرح‌بندی دوبُعدی برای وب است. شبکه‌ها امکان سازماندهی محتوا در ردیف‌ها و ستون‌ها را به ما می‌دهند.

طرح‌بندی یک صفحه وب با یک هدر، یک نوار کناری، ناحیه محتوای اصلی و یک فوتر (مانند تصویر 1 زیر) را تصور کنید. این اجزای صفحه وب نیازمند طرح‌بندی صحیحی روی صفحه هستند. Grid در CSS به ما کمک می‌کند که این کار را چنان که با بررسی یک مثال از شبکه تصاویر خواهیم دید، انجام دهیم.

در تصویر زیر شبکه تصاویری که از آن صحبت کردیم و می‌خواهیم بسازیم را مشاهده می‌کنید.

خوب هر چه تا اینجا در مورد تئوری صحبت کردیم کافی است. اینک نوبت کار عملی فرا رسیده است.

یک پوشه روی سیستم خود ایجاد کرد و نامی برای آن تعیین کنید. ما پوشه خودمان را Photogrid می‌نامیم. پوشه را در ویرایشگر متنی محبوب خود باز کنید. ما از VSCode استفاده می‌کنیم. 2 فایل ایجاد کنید که نام یکی index.html و دیگری main.css است. ما استایل های مورد نیاز را در فایل main.css می‌نویسیم. کد زیر را به فایل index.html کپی کنید:

همان طور که در قطعه کد فوق می‌بینید، 13 div ایجاد کرده‌ایم که هر کدام یک تصویر دارد و از سرویس عکس Unsplash واکشی می‌شود. div کانتینر کلاسی از نوع container. دارد. توجه کنید که برخی از فرزندان div کانتینر، دارای کلاس‌هایی مانند big ،.vertical. و horizontal. هستند. ما این div-ها را به طرز متفاوتی سبک‌بندی خواهیم کرد. اینک نوبت به استایل‌دهی شبکه تصاویر رسیده است.

ایجاد استایل برای شبکه تصاویر

در فایل main.css استایل‌هایی برای شبکه تصاویر خود ایجاد می‌کنیم و کار خود را با کلاس container آغاز می‌کنیم.

در ادامه به اختصار در مورد کارکرد هر یک از مشخصه‌های فوق صحبت می‌کنیم.

توضیح مشخصه‌های استایل

برای این که با هر کانتینر مانند یک کانتینر شبکه رفتار شود، باید نوع display به صورت grid و یا grid-inline برای شبکه‌های درون‌خطی تعریف شده باشد. مشخصه grid-template-columns به تعریف ستون‌هایی از کانتینر شبکه می‌پردازد. شما می‌توانید عرض ستون را با استفاده از یک کلیدواژه مانند auto-fit یا یک طول مانند 50px تعریف کنید. در مورد مثال فوق ما مقدار grid-template-columns را درون یک متد ()repeat تعریف می‌کنیم.

متد repeat نشان دهنده یک فرگمان تکراری از یک tracklist است. بنابراین یک مقدار مانند (repeat(3، 80px سه ستون ایجاد می‌کند که هر یک عرضی برابر با 80 پیکسل دارند. کلیدواژه auto-fit به مدیریت اندازه‌های ستون می‌پردازد. بدین ترتیب می‌توانیم بیشتری تعداد ممکن ستون‌ها را در ردیفی با طول مفروض قرار دهیم. برای نمونه یک مقدار grid-template-columns به صورت (repeat(auto-fit، 100px بیشترین تعداد ستون‌هایی که در div-های کانتینر شبکه وجود دارند با تنظیمات عرض 80 پیکسل تولید می‌کند. در نهایت تابع minmax به تعریف کمینه و بیشینه عرض هر ستون می‌پردازد. minmax برای ایجاد صفحه‌های واکنش‌گرا بسیار مفید است.

The grid-auto-rows اندازه یک ردیف شبکه را که به صورت صریح ایجاد شده است تعیین می‌کند. بنابراین بر اساس قطعه کد CSS فوق این بدان معنی است که هر div که در کانتینر شبکه داریم ارتفاعی برابر با 200 پیکسل خواهد داشت.

grid-gap اندازه فاصله بین ستون‌ها و ردیف‌ها را تعیین می‌کند. در مثال مورد بررسی، grid-gap آن مقدار 5 پیکسل هم برای فاصله بین ستون‌ها و هم بین ردیف‌ها است.

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

تکمیل کد شبکه تصاویر

همان طور که می‌بینید توضیح‌های فوق برای چند خط کد کمی زیاد محسوب می‌شوند، اما خوشبختانه شما اینک با فرایند کار به خوبی آشنا شده‌اید. اکنون باید پا را فراتر گذاشته و شبکه تصاویر را تکمیل کنیم. ابتدا باید مطمئن شویم که همه تصاویر به طور صحیحی در div-ها قرار می‌گیرند.

به این منظور کد زیر را در فایل CSS پس از کلاس container. قرار دهید.

این کد به تعیین عرض و ارتفاع همه تصاویر در شبکه بر اساس 100% کانتینرهایشان می‌پردازد. در نهایت به استایل‌دهی div-ها با کلاس‌های verical ،.horizontal. و .big می‌پردازیم.

در این بخش به صحبت در مورد مشخصه‌های CSS در قطعه کد فوق می‌پردازیم.

مشخصه CSS به نام grid-column یک مشخصه اختصاری برای grid-column-start و grid-column-end است که اندازه شبکه و موقعیت درون شبکه را تعیین می‌کند. کلیدواژه span تعداد ردیف‌ها یا ستون‌هایی که یک grid-column یا grid-row باید پوشش دهد تعیین می‌کند.

در مثال فوق، برای این که طول برخی تصاویر دو برابر بزرگ‌تر باشد، مقدار grid-column را برای کلاس horizontal. برابر با span 2 و برای کلاس vertical. نیز برابر با span 2 تعیین می‌کنیم تا ارتفاع برخی تصاویر دو برابر از بقیه باشد. div-های دارای کلاس big. در هر دو گستره ردیف و ستون اندازه‌ای دو برابر معمول دارند. اینک فایل index.html را در یک مرورگر باز کنید و خروجی را مشاهده کنید.

اگر علاقه‌مند هستید کد کامل را بینید، می‌توانید به فایل‌های زیر رجوع کنید:

فایل index.html

فایل main.css

نسخه نهایی باید چیزی مانند تصویر زیر باشد:

توجه داشته باشید که طرح‌بندی CSS گرید مشخصه‌های زیاد دیگری دارد که احتمالاً مورد توجه شما قرار خواهند گرفت. بنابراین می‌توانید بررسی آن را با مطالعه مستندات (+) آغاز کنید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت
• آموزش پروژه محور HTML و CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• آشنایی با مفهوم Position Absolute در CSS — به زبان ساده
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
• آموزش CSS Grid — گام به گام، کاربردی و پروژه محور

==