مشاوره و انتخاب نقشه راه اختصاصی شما برای یادگیری برنامه نویسی در اینسپشن (فرصت محدود ⏰)
۰ ثانیه
۰ دقیقه
۰ ساعت
۲ emad ta
فصل ccsgrid خلاصه مطالب استاد از جلسه 1 تا آخر
جامعه Html & CSS ایجاد شده در ۰۸ شهریور ۱۳۹۹

سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

 

نکته  : flex فقط در ردیف‌ها در row‌ها در راستای افقی و عرض container چینش المان‌ها رو کنترل میکند و تراز‌های عمودی را هم که انجام میداد صرفا عناصر  فرزند نسبت به المان هاشون بوده و cssgrid اومد تا به ما قدرت تراز در ارتفاع یا ستون‌ها رو بده و بیشتر در layout‌های شبیه گالری تصاویر هستند کاربرد دارد 

 

نکته : ما در cssgrid حدودا 12 ستون داریم 

 

gap : به فضای خالی بین ستون‌ها و ردیف‌ها میگویند 

 

line : به ما در تعین ارتفاع یا عرض عناصر کمک میکند و دقیقا در وسط گپ‌ها قرار میگیرد و تعدا آن‌ها همیشه بیشتر از 1 واحد از ستون‌ها و ردیف‌ها بیشتر هستند 

نکته : ما موقعی که میایم و از  dispaly : flex  میایم و استفاده میکنیم چون به  صورت عرضی هست میاد و به طور خودکار عناصر به صورت اینلاین قرار میدهد و خاصیت‌های بلاکی آن‌ها رو جلوشونو میگیرد اما در grid به این شکل نیست و برای انجام این کار ما باید بیایم و از یک سری پراپرتی دیگه هم استفاده بکنیم 

 

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

برای دادن فاصله بین المان هامون لازم نیست بیایم و از پراپرتی‌های padding و margin برای اون‌ها استفاده کنیم بلکه کافیه بیایم  و در والد آن‌ها از پراپرتی  gird-column-gap و  gird-row-gap برای ستون‌ها و سطر‌ها استفاده بکنیم 

 

معرفی پراپرتی‌های برای container : 

justify-content که مشابه آن در flex بود 

emad ta ۰۹ شهریور ۱۳۹۹، ۱۸:۴۶

معرفی پراپرتی هایی برای item :

 

grid-column-start  و  grid-column-end   که خلاصه ی پراپرتی grid-column هستش که برای گرید بندی ستون‌ها میایم و از این استفاده  میکنیم  مثال »  grid-column : 2 / 5 که میگوید از لاین دو تا لاین 5 در ستون‌ها بیا و ادامه بده  همچنین برای ردیف‌ها هم از پراپرتی‌های زیر استفاده میکنیم  grid-row-start  و  grid-row-end  که خلاصه ی پراپرتی grid-row هستش 

 

نکته » ما میتوانیم به جای واحد‌های لاین برای end ‌ها بیایم و از span استفاده بکنیم به این شکل که به هریک از واحد‌های المان هامون یا خونه‌ها میگیم ی span 

 

grid-area : خلاصه ی دو تا پراپرتی های grid-column و grid-row به این شکل البته 

grid-area : start-row-line / start-column-line / end-row-line/ end-column-line

 

grid-template-areas :  خلاصه شده ی دو تا پراپرتی  grid-template-rows و grid-template-column  فقط برای مقدار دهی باید به جای اعداد از نام‌ها استفاده بکنیم و برای هر ردیف رو در داخل یک '  '  قرار دهیم و هنگام استاده کافیست بیایم و از نام‌ها استفاده بکنیم همچنین در مواقعی که نمیخاهیم نامی قرار دهیم میتوانیم از . استفاده بکنیم 

مثال : 

grid-template-areas {
'menu menu menu menu menu menu menu menu' 
' topic topic topic  slider slider slider slider slider '
' slider slider slider content content . . . '
}

و در هنگام استفاده کافیست فقط بیایم و نام‌های بالا در grid-area قرار دهیم 

 

استفاده از fragshen‌ها که می‌توانیم برای تناسب‌ها بیایم و از آن‌ها استفاده بکنیم 

grid-template-column  :   1fr   1fr   3fr  

همچنین می‌توانیم از تابع repeat هم بیایم و استفاده بکنیم به انی صورت که در مقدار اول تعدا و در مقدار دوم مقادیر رو میگیرد مثل 

repeat( 4 ,1fr )

 

استفاده از تابع minmax  که میاد حداق و حداکثر رو  برای هر یک از ستون‌ها و ردیف هامون رو میتوانیم بیایم و استفاده بکنیم 

emad ta ۱۰ شهریور ۱۳۹۹، ۲۰:۴۹