یک ماژول قدرتمند سی اس اس می باشد که از سال 2017 توسط همه ی مرورگرهای وب پشتیبانی می شود.
سی اس اس گرید برای حل مشکل چیدمان صفحات وب طراحی شده است که به صورت دو بعدی اعمال می شود.
اما فلکس باکس که از دیگر ماژول های سی اس اس است فقط در یک جهت اعمال می شود.
همچنین برای ریسپانسیو سازی صفحات وب به ما کمک میکند.
اگه با مفاهیم واکنش گرایی صفحات وب آشنا نیستی توی پست زیر توضیح دادم
برای اینکه بهتر درک کنید که گرید چیه باید شیرجه بزنیم توی کد و حسابی گریدی بشیم :)
پس با من همراه باشید.
تگ والدی که display : grid برای آن تعریف می شود نگه دارنده یا Container می باشد ویژگی های گرید فقط به فرزندان مستقیم این تگ اعمال می شود که این فرزندان همان Item های ما هستند.
خط های که ستون ها و ردیف های ما را از هم جدا می کنند خط گرید یا Grid Line نامیده می شوند
که به صورت زیر شماره گذاری می شوند.
در گرید ستون های ما با column و سطر های ما row مشخص می شوند.
فاصله بین دو Grid Line ستونی و دو Grid Line سطری که مجاور یکدیگر هستند سلول گرید گفته می شود.
فاصله بین دو Grid Line سطری یا ستونی که مجاور یکدیگر هستند یک Track نامیده می شود.
ویژگی ها یا Property های که در CSS Grid وجود دارند به دو دسته Container Properties و Item Properties تقسیم می شوند ویژگی های که مربوط به تگ والد یا نگه دارنده هستند و ویژگی هایی که مربوط به تگ های فرزند یا آیتم ها هستند.
این ویژگی فقط برای Container قابل استفاده هستند دقت کنید برای Items استفاده نکنید!
ویژگی template برای ایجاد قالب برای چیدمان گرید هستند با همین سه خط یک چیدمان شامل سه سطر و سه ستون تعریف میکنیم.
فاصله بین سطرها با grid-row-gap و فاصله بین ستون ها grid-column-gap و فاصله بین هر دو با grid-gap مشخص می شود.
آیتم ها را در محدوده بین خط گریدی که برای آن ها مشخص شده تراز بندی می کند به صورت پیش فرض مقدارشان Stretch می باشد برای تراز بندی به صورت طولی از justify-items و به صورت عرضی از align-items استفاده می شود.
و سه مقدار دیگر نیز دارد ابتدا یا start و انتها یا end و وسط چین یا center
به همان صورت که کمی قبل تر استفاده کردیم justify به صورت طولی و align به صورت عرضی اعمال می شود با این تفاوت که این بار ترازبندی در محدوده نگه دارنده یا Container انجام می گیرد همان طور که از اسمش هم پیداست content نشانگر این می باشد که تراز بندی روی خود تگ والد نگه دارنده انجام می گیرد نه آیتم ها که در قبل بررسی کردیم.
مقادیر این ویژگی ها به صورت زیر می باشند.
جریان تشکیل سطر یا ستونی جدید را با grid-auto-flow تعریف می کنیم که به صورت پیش فرض مقدار row می باشد اگر آن را به column تغییر دهیم زمانی که آیتم در کنار هم یکدیگر جای نگیرند به جای اینکه سطری جدید تشکیل دهد ستونی جدید را برای ما تشکیل می دهد.
همچنین این ستون یا سطر های جدید که تشکیل شده اند امکان دارد به آن ها اندازه مشخص نداده باشیم در این صورت با grid-auto-rows یا grid-auto-columns اندازه هر آیتم در سطر یا ستون جدید به صورت پیش فرض مشخص می کنیم.
این ویژگی فقط برای Item قابل استفاده هستند دقت کنید برای Container استفاده نکنید!
این دو ویژگی جایگاه قرارگیری آیتم های ما بین خط های گرید را مشخص می کنند می توانیم با grid-row به صورت سطری و با grid-column به صورت ستونی آیتم خود را جا به جا کنیم یا حتی تعداد بیشتری از سلول های گرید خود را به یک آیتم تخصیص بدهیم
این دو ویژگی را در قسمت ویژگی های نگه دارنده توضیح دادیم اگه یادتون بیاد align-items و justify-items که تراز بندی یک آیتم درون سلول گرید خودش رو مشخص می کردند این ها هم دقیقا همون کار را می کنند و همان مقادیر را دارند با این تفاوت که فقط روی یک آیتم اعمال می شوند
اگه علاقه دارید با گرید یکم بازی کنید تا بهتر مسلط بشید به وب سایت زیر سر بزنید :)
اگه علاقه داری با فلکس باکس هم آشنا بشی توی پست زیر توضیح دادم
CSS Tricks : A Complete Guide to Grid
