شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

آموزش کار با Grid view در CSS | چگونه صفحات سایت را ریسپانسیو کنیم؟


نویسنده:
پنجشنبه ۱ آبان ۱۳۹۹
کار با Grid view

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

اگر هنوز با مباحث ابتدایی ریسپانسیو آشنایی ندارید بهتر است به درس قبلی باز گردید و مبحث media query در css را مطالعه کنید.

Grid view چیست؟

مفهوم Grid view یا نمای شبکه‌ای، یک دیدگاه کاربردی است که کمک می‌کند صفحات خود را به آسانی ریسپانسیو کنیم. در این دیدگاه ما برای یک صفحه از وب‌سایت ۱۲ ستون فرضی در نظر می‌گیریم و تمامی عناصر صفحه را با این ستون‌ها در صفحه جای می‌دهیم.

مفهوم Grid view یا ستون بندی در CSS

استفاده از نمای شبکه‌ای کار را راحت‌تر می‌کند و باعث می‌شود عناصر در هر جای صفحه که بخواهیم قرار بگیرند. در عرض ۱۰۰٪ صفحه ۱۲ ستون قرار می‌گیرد که هرگاه سایز نمایشگر کوچک‌تر باشد عرض هر ستون کاهش می‌یابد. برای درک بهتر کاربرد این ستون‌ها بهتر است عجله نکنید و در ادامه مقاله همراه ما باشید.

نحوه ایجاد Grid view در CSS

در ابتدا به تمامی عناصر صفحه box-sizing می‌دهیم و آن را روی border-box تنظیم می‌کنیم. این کار باعث می‌شود اندازه padding و border هر عنصر در width و Height آن محاسبه شود. در واقع این ویژگی‌ها در عرض و ارتفاع عنصر اندازه مازاد ایجاد نکنند.

اگر بخواهیم در صفحه دو ستون ایجاد کنیم که بخش اول ۲۵٪ از عرض و بخش دوم ۷۵٪ درصد عرض داشته باشد آنگاه باید بنویسیم:

که خروجی کد بالا به این شکل است:

نحوه ایجاد Grid view در CSS

اما ما هدفمان ایجاد ۱۲ ستون رسپانسیو در صفحه است. برای اینکار اگر ۱۰۰ را بر ۱۲ تقسیم کنیم متوجه می‌شویم که عرض هر ستون باید ۸.۳۳٪ باشد:

در خط ۱۴ از کد بالا با انتخاب تمامی عناصری که دارای کلاس col هستند یعنی تمامی ستون‌ها، استایل‌هایی مثل padding داده شده‌اند. همچنین برای اینکه عناصر کنار در هم قرار بگیرند از float استفاده کردیم. برای مشخص شدن محدوده هر ستون هم از یک border قرمز استفاده کردیم که بعد از اتمام یادگیری باید این مورد پاک شود.

در بخش آخر کد بالا با انتخاب کلاس row اثر float ستون‌ها را خنثی کرده‌ایم که عناصر بعدی مشکلی با float نداشته باشند. پس همیشه ستون‌بندی‌ها را درون کلاسی به نام row قرار دهید.


نحوه استفاده از ستون‌بندی‌‌ در CSS

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

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

نحوه استفاده از ستون‌بندی‌‌ در CSS
خروجی کد بالا


توضیح نهایی:

با ساده‌ترین کاربرد ستون‌بندی‌ها در CSS آشنا شدیم اما کل کاربرد این ستون‌ها به همینجا ختم نمی‌شود. میتوان ستون‌های جدیدتری در عرض‌های مختلف نمایشگر تعریف کرد و به هر عنصر گفت که در هر نمایشگر چه عرضی را اشغال کند. مثلا عنصری که در مانیتور کامپیوتر ۳۰ درصد از عرض را اشغال کرده است، در موبایل عرض ۱۰۰٪ داشته باشد تا واضح‌تر دیده شود. در جلسه بعدی با اجرای یک مینی پروژه در CSS این مباحث را جمع‌بندی خواهیم کرد.

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

به زودی اطلاع رسانی‌های لازم در این خصوص در وب‌سایت قرار خواهند گرفت.

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *