قسمت پایانی: آیتم های grid در CSS

CSS Grid Item

2 242

کار با آیتم های Grid در زبان CSS

سلام! به آخرین قسمت از دوره ی CSS پیشرفته که راجع به کار آیتم های grid در CSS است، با خوش آمدید.

همانطور که می دانید نگهدارنده (container) در grid ها دارای عناصری هستند که به آن ها آیتم می گوییم. یعنی هر عنصری که داخل این نگهدارنده ها قرار بگیرد یک آیتم محسوب می شود. در حالت عادی هر نگهدارنده برای هر ستون خود یک آیتم را در نظر می گیرد اما ما می توانیم با دستورات CSS آن ها را بزرگتر یا کوچکتر کنیم.

خصوصیت grid-column

خصوصیت grid-column تعیین می کند که هر آیتم در کدام ستون قرار بگیرد؛ به عبارت دیگر به آیتم می گویید که از کجا شروع کرده و در آخر به کجا برسد. آیا متوجه شدید؟ دستور grid-column در واقع خلاصه ی دستورات grid-column-start و grid-column-end است!

برای موقعیت دهی به یک آیتم می توانید از دو راه عمل کنید:

  • خط شروع را مشخص کرده و خط پایان را هم مشخص کنید.
  • خط شروع را مشخص کرده و تعداد خط های اشغال شونده را مشخص کنید.

در حالت اول می گوییم مثلا آیتم ما باید از خط 1 شروع شده و تا خط پنجم ادامه داشته باشد:

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

در حالت دوم می گوییم آیتم ما باید از خط اول شروع شده و به اندازه ی 3 ستون ادامه پیدا کند:

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

و یا به طور مثال می گوییم آیتمی که کلاس item2 را دارد باید از ستون دوم شروع شده و تا 3 ستون بعد ادامه پیدا کند:

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

خصوصیت grid-row

خصوصیت grid-row تعیین می کند که آیتم ما در چه ردیفی (نه ستون!) قرار بگیرد. مانند دستور قبلی باید نقاط شروع و پایان را برای آیتم خود تعیین کنیم و همانطور که حدس میزنید خصوصیت grid-row دستور خلاصه شده ی  grid-row-start و grid-row-end است.

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

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

و برای مثال دوم می گوییم آیتم ما باید از ردیف اول شروع شده و تا 2 ردیف بعد را شامل شود:

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

خصوصیت grid-area

دستور grid-area خلاصه شده ی دستورات grid-row-start و grid-column-start و grid-row-end و grid-column-end است.

به مثال های زیر دقت کنید:

مثال اول: به item8 می گوییم که از ردیف اول و ستون دوم شروع شده و در ردیف پنجم و ستون ششم تمام شود:

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

مثال دوم: item8 باید از ردیف دوم و ستون اول شروع شده و تا دو ردیف و سه ستون ادامه پیدا کند:

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

نام گذاری آیتم ها

از خصوصیت grid-area می توان برای نام گذاری آیتم ها هم استفاده کرد!

نمونه ای از نام گذاری آیتم ها
نمونه ای از نام گذاری آیتم ها

سپس آیتم های نام گذاری شده را می توان با استفاده از grid-template-areas صدا زد. به مثال زیر توجه کنید.

در کد زیر نام آیتم اول را برابر myArea قرار داده ایم که در یک grid پنج ستونه تمام 5 ستون را اشغال می کند:

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

هر ردیف با استفاده از single quotation (علامت ') مشخص می شود. ستون های هر دریف داخل همین علامت تعریف و با اسپیس از هم جدا می شوند.

نکته: علامت نقطه یعنی آیتم ها هیچ نامی ندارد.

آیتم myArea در کد زیر دو ستون را اشغال کرده است. همچنین سه علامت نقطه نیز (همانطور که گفتیم) به معنی آیتم های بدون نام هستند:

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

اگر می خواهید دو ردیف مختلف داشته باشید، باید ستون مربوط به ردیف دوم را درون یک جفت Single quotation دیگر قرار بدهید:

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

همچنین با نام گذاری تمام آیتم ها یک قالب آماده برای وب سایت خود خواهیم داشت:

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

ترتیب آیتم ها

سیستم grid به ما اجازه می دهد که آیتم ها را به ترتیب دلخواه خود و در مکان دلخواه خود قرار دهیم؛ به عبارت دیگر آیتمی که در کد HTML ما اول آمده است می تواند در خروجی آخرین آیتم باشد. به این مثال دقت کنید:

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

همچنین می توانیم با استفاده از media query ها این ترتیب را در سایز مختلف صفحات، به صورت مختلف نمایش دهیم تا هر سایز نمایشگری ترتیب خاصی را نشان دهد:

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

این قسمت آخرین قسمت از دوره ی CSS پیشرفته بود، امیدوارم از آن لذت برده باشید.

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

    خیلی از این دوره استفاده کردم خواستم تشکر کنم

    1. امیر زوارمی
      0

      سلام دوست عزیز،
      خواهش میکنم. خیلی خوشحالم که برای شما مفید بوده!

ارسال نظر

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

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