فصل ccsgrid خلاصه مطالب استاد از جلسه 1 تا آخر

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

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

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

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

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

معرفی پراپرتی هایی برای 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  که میاد حداق و حداکثر رو  برای هر یک از ستون ها و ردیف هامون رو میتوانیم بیایم و استفاده بکنیم