آموزش ویژگی grid در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی grid در CSS با من همراه باشید.

آموزش ویژگی grid در CSS

Free-Learn

ویژگی grid در CSS

با استفاده از ویژگی grid در CSS میتوان تمامی ویژگی های زیر را که مربوط به سیستم طرح بندی گرید یا Grid می باشند بصورت خلاصه نوشت :

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی grid را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : ایجاد ۴ ستون از آیتم ها + تنظیم اندازه سطر و ستون اول ۱۵۰px

امتحان کنید

مثال شماره ۲ : ایجاد یک طرح بندی ساده با استفاده از گرید + واکنش گرایی آیتم های گرید ( یعنی اگه بروی گوشی های موبایل یا درکل بروی دستگاهایی که عرض صفحه نمایششون کمتر از ۵۰۰ پیکسل بود، چیدمان Grid ما به نسبت صفحه نمایش تغییر کند )

امتحان کنید

Free-Learn

جدول مشخصات ویژگی grid در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض none none none auto auto row
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS Grid Layout Module Level 1
نحوه استفاده در جاوااسکریپت object.style.grid=”150px / auto auto auto”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی grid در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
grid ۵۷ ۵۲ ۴۴ ۱۰ خیر

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی grid در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
none پیش فرض – هیچ اندازه خاصی را برای سطرها و ستون ها مشخص نمیکند
grid-template-rows /
grid-template-columns
اندازه سطر / ستون گرید را مشخص میکند
grid-template-areas ایجاد گرید با استفاده از نام آیتم ها
grid-template-rows /
grid-auto-columns
تنظیم اندازه (ارتفاع) سطرها / اندازه خودکار ستون ها
grid-auto-rows /
grid-template-columns
تنظیم اندازه خودکار سطرها / اندازه ستون های گرید
grid-template-rows /
grid-auto-flow
grid-auto-columns
تنظیم اندازه (ارتفاع) سطرها / قرار گیری خودکار آیتم ها و اندازه خودکار ستون ها
grid-auto-flow
grid-auto-rows /
grid-template-columns
قرار گیری خودکار آیتم ها و اندازه خودکار سطرها / اندازه ستون های گرید
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

این ویژگی در مرورگر اینترنت اکسپلورر یا IE از نسخه ۶ تا ۹ بکل پشتیبانی نمیشود، و از نسخه ۱۰ تا ۱۱ بصورت جزئی ولی نه بطور کامل پشتیبانی میشود. ( درکل بخوایم بگیم فعلا پشتیبانی نمیشود )

Free-Learn

فروشگاه فری لرن
دریافت PDF یا پرینت این مطلب