کار با container (نگهدارنده‌ی) grid

CSS Grid Container

0 263

نگهدارنده های grid یا grid container در CSS

برای آنکه یک عنصر HTML را به Grid Container تبدیل کنید باید مقدار display آن را روی grid یا inline-grid قرار دهید. Grid container ها شامل آیتم های grid هستند که خودشان داخل ستون ها و ردیف های فرضی قرار دارند. به این مثال توجه کنید:

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

در مثال بالا مستطیل آبی رنگی که آیتم ها درونش قرار دارند همان نگهدارنده یا container ما است. در این مقاله می خواهیم نحوه ی کار با آن و مسائل مربوط به آن را بررسی کنیم.

خصوصیت grid-template-columns

خصوصیت grid-template-columns تعداد ستون های grid شما و عرض هر ستون را مشخص می کند. مقادیری که این خصوصیت می گیرد با اسپیس از هم جدا می شوند و هر مقدار عرض ستون متناظرش را تعیین می کند. فرض کنید می خواهید یک grid چهار ستونه داشته باشید؛ اگر شما بخواهید ستون های این grid دارای عرض یکسانی باشند، باید چهار بار auto را به آن بدهید و در غیر این صورت باید مقدار عرض ستون ها را مشخص کنید:

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

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

خصوصیت grid-template-columns عرض ستون ها را نیز مشخص می کند. به این مثال توجه کنید:

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

همانطور که می بینید عرض ستون ها بر اساس چیزی که در کد تعریف شده، متفاوت است.

خصوصیت grid-template-rows

خصوصیت grid-template-rows ارتفاع هر ستون را مشخص می کند. مثال آن بسیار ساده و قابل درک است؛ مقادیر آن دقیقا مانند خصوصیت grid-template-columns با اسپیس از هم جدا می شوند و هر مقدار ارتفاع ستون متناظرش را تعیین می کند:

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

تفاوت ارتفاع ستون ها در مثال بالا کاملا مشخص است.

خصوصیت justify-content

خصوصیت justify-content تمام موارد داخل نگهدارنده را تراز می کند. البته برای آنکه این خصوصیت تاثیری داشته باشد باید عرض کل grid از عرض container (نگهدارنده) کمتر باشد.

مثال اول:

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

مقدار “space-evenly” به اطراف و بین ستون ها به مقدار یکسان فضای خالی اضافه می کند.

مثال هایی از مقادیر دیگر این خصوصیت:

مثال اول:

مقدار space-around به اطراف ستون ها فضای خالی اضافه می کند.

مثال دوم:

مقدار space-between بین ستون ها فضای خالی ایجاد می کند.

مثال سوم:

مقدار center تمام grid را در وسط نگهدارنده قرار می دهد.

مثال چهارم:

مقدار start تمام grid را در ابتدای نگهدارنده قرار می دهد.

مثال پنجم:

مقدار end تمام grid را در آخر نگهدارنده قرار می دهد.

خصوصیت align-content

خصوصیت align-content تمام grid را از نظر محور عمودی در وسط نگهدارنده قرار می دهد. توجه داشته باشید که اگر ارتفاع کل grid از ارتفاع نگهدارنده بیشتر باشد این دستور به هیچ وجه کار نخواهد کرد.

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

مقدار “center” ردیف ها را در وسط نگهدارنده تراز می کند.

مثال هایی از مقادیر دیگر این خصوصیت:

مثال اول:

مقدار space-evenly به اطراف ردیف ها و همچنین بین ردیف ها مقدار فضای خالی یکسانی اضافه می کند.

مثال دوم:

مقدار space-around در اطراف ردیف ها فضای خالی ایجاد می کند.

مثال سوم:

مقدار space-between بین ردیف ها فضای خالی ایجاد می کند.

مثال چهارم:

مقدار start تمام grid را در ابتدای نگهدارنده قرار می دهد.

مثال پنجم:

مقدار end تمام grid را در آخر نگهدارنده قرار می دهد.

امیدواریم از بحث grid container در CSS لذت برده باشید و این درس از سری آموزش CSS پیشرفته برای شما عزیزان مفید بوده باشد.

ترتیبی که روکسو برای یادگیری مطالب سری CSS پیشرفته به شما توصیه می‌کند:

ارسال نظر

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

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