Grid-View چیست؟

Grid View

0 278

Grid-View در CSS

بسیاری از صفحات وب امروزی بر اساس grid-view طراحی شده اند. grid-view (در فارسی: دید شبکه‌ای) یعنی صفحه ی ما به ستون های متعددی تقسیم شده است:

ستون های فرضی در طراحی grid-view (این ستون ها و خط ها واقعا وجود ندارند، فرضی هستند)
ستون های فرضی در طراحی grid-view (این ستون ها و خط ها واقعا وجود ندارند، فرضی هستند)
تفاوت تئوری صفحات طراحی شده با Grid
تفاوت تئوری صفحات طراحی شده با Grid

استفاده از grid-view کار طراحی وب را صد برابر ساده تر می کند و نیاز شما به اندازه گیری های بسیار دقیق را از بین می برد.

یک مثال پیشرفته از grid-view را ببینید:

مشاهده ی خروجی در JSBin

مثال بالا یک grid-view واکنش گرا است که 12 ستون دارد و عرض آن نیز 100 درصد است. از آنجا که این grid-view واکنش گراست با کوچک و بزرگ شدن مرورگر، اندازه اش نیز تغییر می کند. نیازی نیست که کدهای آن را بررسی کنید، فقط ظاهر آن را ببینید تا با آن آشنا شوید.

نکته: اگر قسمت خروجی این مثال را بسیار کوچک کنید، می بینید که ظاهر جالبی پیدا نمی کند و 100 درصد واکنش گرا نیست. در قسمت بعدی این سری آموزشی درباره ی حل مشکلات آن از طریق media query ها صحبت خواهیم کرد.

ساخت grid-view واکنش گرا

اول از همه باید مطمئن شوید که خصوصیت box-sizing برای تمامی عناصر HTML روی border-box قرار دارد؛ این موضوع باعث می شود که padding ها و حاشیه ها و … نیز در طول و عرض عناصر محاسبه شوند. بنابراین کد زیر را به سند THML خود اضافه کنید:

قبلا در مورد Box-Sizing صحبت کرده ایم. اگر مطالب آن قسمت از یادتان رفته است به قسمت های قبلی مراجعه کنید.

ابتدا با یک مثال ساده شروع می کنیم. مثال زیر دو ستون دارد؛ یکی 25 و دیگری 75 درصد:

مشاهده ی خروجی در JSBin

در صورتی که صفحات وب تنها دو ستون داشتند مثال بالا مثال خوبی محسوب می شد اما ما می خواهیم از grid-view های 12 ستونه استفاده کنیم تا روی صفحات خود کنترل کامل داشته باشیم. ابتدا باید مقدار عرض هر ستون را محاسبه کنیم؛ 100 درصد عرض صفحه تقسیم بر 12 ستون مساوی است با 8.33 درصد. سپس برای هر کدام از این ستون های 12 تایی یک کلاس می سازیم که بر اساس قالب "-class="col و تنها عدد آخرش فرق کند. مثال زیر را ببینید:

مشاهده ی خروجی در JSBin

حالا تمام ستون ها را به سمت چپ Float می کنیم (اگر وب سایت شما فارسی است آن را به راست float کنید) و به آن 15 پیکسل padding می دهیم:

همچنین هر ردیف باید در یک <div> قرار بگیرد و مجموع تعداد ستون های یک ردیف باید همیشه برابر 12 باشد:

در مثال بالا 3 و 9 می شود 12.

از آن جا که تمام ستون های هر ردیف را float کرده ایم بقیه ی عناصری که float نباشند طوری رفتار می کنند که انگار عناصر float وجود ندارند و زیر آن ها می روند. همانطور که در جلسات قبل بحث کردیم، برای حل این مشکل باید clearfix استفاده کنیم:

حالا برای تکمیل نهایی طرح باید عناصر را استایل دهی کنیم تا از نظر ظاهری زیبا تر شوند:

مشاهده ی خروجی در JSBin

البته یادتان باشد می توانید از کتابخانه های آماده ی grid نیز استفاده کنید.

نکته: اگر قسمت خروجی این مثال را بسیار کوچک کنید، میبینید که ظاهر جالبی پیدا نمی کند و 100 درصد واکنش گرا نیست. در قسمت بعدی این سری آموزشی درباره ی حل مشکلات آن از طریق media query ها صحبت خواهیم کرد.
ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

film izle | eskisehir escort | modanisa | mersin escort | www.ieski.com | eskort adana | www.izmir-eskort.org | kabak koyu | hd tv izle