grid ها در زبان CSS

CSS Grid

0 314

ماژول Grid در CSS چیست؟

Grid در CSS به ما توانایی طراحی صفحات را به صورت ستونی می دهد؛ یعنی ستون هایی را در صفحه فرض می کند و ما می توانیم بر اساس این ستون های فرضی، اندازه ی عناصر مختلف را تعیین کنیم و دیگر نیازی به float برای شناور کردن به سمت راست و چپ نخواهیم داشت.

grid در css
تفاوت صفحات طراحی شده با Grid

وضعیت پشتیبانی مرورگرها از grid در CSS بدین صورت است:

کروم edge فایرفاکس سافاری اپرا
57.0 16.0 52.0 10 44

در واقع یک grid یک نگهدارنده یا عنصر پدر است که دارای فرزندان متعددی است. به این مثال دقت کنید:

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

خصوصیت display

برای آنکه صفحات وب خود را به صورت grid طراحی کنیم، مقدار display عنصر پدر باید روی grid یا inline-grid تنظیم شود و فرزندان به طور خودکار به آیتم های grid تبدیل می شوند.

مثالی از حالت grid برای عنصر پدر:

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

مثالی از حالت inline-grid برای عنصر پدر:

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

ستون ها، ردیف ها و فاصله های ماژول grid

همانطور که در تصویر زیر می بینید ستون ها (column) خط های فرضی هستند که به ستون شباهت دارند:

ستون ها در ماژول grid
ستون ها در ماژول grid

و ردیف ها (row) خط های افقی هستند:

ردیف ها در ماژول grid
ردیف ها در ماژول grid

و در آخر به فاصله های ستون ها یا ردیف ها Gap (فاصله) می گوییم:

فاصله ها در ماژول grid
فاصله ها در ماژول grid

شما می توانید با استفاده از یکی از دستورات زیر، اندازه ی این فاصله ها را تعیین کنید:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

1. خصوصیت grid-column-gap فاصله ی بین ستون ها را مشخص می کند:

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

2. خصوصیت grid-row-gap اندازه ی فاصله های بین ردیف ها را مشخص می کند:

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

3. خصوصیت grid-gap دستور خلاصه شده ی grid-column-gap و grid-row-gap است:

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

البته می توانید به همین خصوصیت تنها یک عدد بدهید در این صورت آن عدد برای هر دو دستور grid-column-gap و grid-row-gap تعیین می شود:

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

خطوط grid

به خطوط بین ستون ها column line (خط ستون) و به خطوط بین ردیف ها row line (خط ردیف) می گوییم:

خطوط ستون و خطوط ردیف در grid

خطوط ستون و خطوط ردیف در grid

زمانی که می خواهید یک آیتم grid را درون نگهدارنده اش قرار دهید باید شماره ی خط را ذکر کنید. به مثال های زیر توجه کنید:

مثال اول: می خواهیم آیتمی را اضافه کنیم که از خط ستون اول شروع شده و تا خط ستون سوم ادامه پیدا کند:

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

مثال دوم: حالا همین کار را برای ردیف ها انجام می دهیم:

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

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

ارسال نظر

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

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