آموزش کامل Css Grid به زبان ساده : بخش اول
Css Grid یکی از قدرتمندترین سیستم های طراحی لایههای مختلف در وب است.Css Grid یک سیستم دوبعدی است به معنا که می توان دو ستون و ردیف مختلف را بر خلاف FlexBox که یک سیستم یک بعدی است طراحی کرد.ما با استفاده از چیدمان Css Grid و بر اساس قوانین سی اس اس می توان از آن در یک عنصر والد مانند Grid Container برای نگهداری عناصر و همچنین از عناصر مختلف هم برای ایجاد Grid Items استفاده میکنیم.در طول آموزش کامل Css Grid ما با نحوه استفاده از یک سیستم طراحی لایه قدرتمند در وب به سادگی آشنا خواهیم شد.(برای درک بیشتر با اططلاحات و توضیحات این آموزش بهتر است از با Css و Css3 آشنایی داشته باشید.برای آشنایی بیشتر می توانید از دوره های ویدئویی و رایگان کدفرند استفاده کنید. ).
قبل از اینکه به مفاهیم Css Grid بپردازیم بهتر است با برخی اصطلاحات آشنا شویم.
Grid lines
وظیفه اصلی گرید لاینها جدا کردن خطوط عمودی و افقی و همچنین جداکردن ستون ها و ردیف هاست.
Grid Cell
یک واحد از Css Grid برای نمایش سلولهای گرید ها.
Grid area
فضای مستطیلی توسط چهار خط Grid احاطه شده است. یک منطقه شبکه یا Grid Area می تواند شامل هر تعداد سلول شبکه یا Grid Cell باشد.
Grid track
فضای بین دو خط Grid. این فضا می تواند به صورت افقی یا عمودی باشد.
مطالب مرتبط:دوره آنلاین و رایگان اموزش Css3 (پیشرفته)
Grid row
مسیر و فضای افقی یک شبکه گرید.
Grid column
مسیر عمودی یک شبکه گرید.
Gutter
فضای بین ردیف ها و ستون ها در یک شبکه Grid
منظور از Grid container و Grid item
در حقیقت فضایی که کل شبکه گرید را نگهداری می کند،ویژگی یا خصوصیت Css که باید برای این عنصر در نظر بگیریم display: grid یا display: inline-grid باشد.Grid item نیز یک عنصر یا یک فزرند از نگهدارنده Grid container می باشد.در بخش دوم آموزش کامل Css Grid با ایجاد اولین لایه گرید آشنا خواهیم شد.