گرید CSS Grid چیست؟ چگونه کار می کند؟

سی اس اس گریدسی اس اس گرید CSS Grid چیه ؟یک ماژول قدرتمند سی اس اس می باشد که از سال 2017 توسط همه ی مرورگرهای وب پشتیبانی می شود.سی اس اس گرید برای حل مشکل چیدمان صفحات وب طراحی شده است که به صورت دو بعدی اعمال می شود.اما فلکس باکس که از دیگر ماژول های سی اس اس است فقط در یک جهت اعمال می شود.همچنین برای ریسپانسیو سازی صفحات وب به ما کمک میکند.اگه با مفاهیم واکنش گرایی صفحات وب آشنا نیستی توی پست زیر توضیح دادم https://vrgl.ir/lpiuI برای اینکه بهتر درک کنید که گرید چیه باید شیرجه بزنیم توی کد و حسابی گریدی بشیم :) پس با من همراه باشید.flexbox vs gridواژه شناسی سی اس اس گریدGrid Container و Grid Itemcontainer & itemsتگ والدی که display : grid برای آن تعریف می شود نگه دارنده یا Container می باشد ویژگی های گرید فقط به فرزندان مستقیم این تگ اعمال می شود که این فرزندان همان Item های ما هستند.Grid Linegrid-line خط های که ستون ها و ردیف های ما را از هم جدا می کنند خط گرید یا Grid Line نامیده می شوندکه به صورت زیر شماره گذاری می شوند.در گرید ستون های ما با column و سطر های ما row مشخص می شوند.شماره گذاری سطر و ستون هاGrid Cellgrid cellفاصله بین دو Grid Line ستونی و دو Grid Line سطری که مجاور یکدیگر هستند سلول گرید گفته می شود.Grid Tracktrackفاصله بین دو Grid Line سطری یا ستونی که مجاور یکدیگر هستند یک Track نامیده می شود.ویژگی های CSS Gridویژگی ها یا Property های که در CSS Grid وجود دارند به دو دسته Container Properties و Item Properties تقسیم می شوند ویژگی های که مربوط به تگ والد یا نگه دارنده هستند و ویژگی هایی که مربوط به تگ های فرزند یا آیتم ها هستند.grid propertiesویژگی های نگه دارنده Container Propertyاین ویژگی فقط برای Container قابل استفاده هستند دقت کنید برای Items استفاده نکنید!grid-template-rowsgrid-template-columnstemplateویژگی template برای ایجاد قالب برای چیدمان گرید هستند با همین سه خط یک چیدمان شامل سه سطر و سه ستون تعریف میکنیم.تشکیل گریدtemplate gridgrid-gapgrid-row-gapgrid-column-gapgrid-gapفاصله بین سطرها با grid-row-gap و فاصله بین ستون ها grid-column-gap و فاصله بین هر دو با grid-gap مشخص می شود.grid gapgapjustify-itemsalign-itemsآیتم ها را در محدوده بین خط گریدی که برای آن ها مشخص شده تراز بندی می کند به صورت پیش فرض مقدارشان Stretch می باشد برای تراز بندی به صورت طولی از justify-items و به صورت عرضی از align-items استفاده می شود.و سه مقدار دیگر نیز دارد ابتدا یا start و انتها یا end و وسط چین یا centeralign & justify itemsjustify-contentalign-contentبه همان صورت که کمی قبل تر استفاده کردیم justify به صورت طولی و align به صورت عرضی اعمال می شود با این تفاوت که این بار ترازبندی در محدوده نگه دارنده یا Container انجام می گیرد همان طور که از اسمش هم پیداست content نشانگر این می باشد که تراز بندی روی خود تگ والد نگه دارنده انجام می گیرد نه آیتم ها که در قبل بررسی کردیم.مقادیر این ویژگی ها به صورت زیر می باشند.justify-contentalign-contentgrid-auto-flowgrid-auto-columnsgrid-auto-rowsجریان تشکیل سطر یا ستونی جدید را با grid-auto-flow تعریف می کنیم که به صورت پیش فرض مقدار row می باشد اگر آن را به column تغییر دهیم زمانی که آیتم در کنار هم یکدیگر جای نگیرند به جای اینکه سطری جدید تشکیل دهد ستونی جدید را برای ما تشکیل می دهد.همچنین این ستون یا سطر های جدید که تشکیل شده اند امکان دارد به آن ها اندازه مشخص نداده باشیم در این صورت با grid-auto-rows یا grid-auto-columns اندازه هر آیتم در سطر یا ستون جدید به صورت پیش فرض مشخص می کنیم.ویژگی های آیتم ها Item Propertiesاین ویژگی فقط برای Item قابل استفاده هستند دقت کنید برای Container استفاده نکنید!grid-row : start / endgrid-column : start / endاین دو ویژگی جایگاه قرارگیری آیتم های ما بین خط های گرید را مشخص می کنند می توانیم با grid-row به صورت سطری و با grid-column به صورت ستونی آیتم خود را جا به جا کنیم یا حتی تعداد بیشتری از سلول های گرید خود را به یک آیتم تخصیص بدهیمrow & columnjustify-selfalign-selfاین دو ویژگی را در قسمت ویژگی های نگه دارنده توضیح دادیم اگه یادتون بیاد align-items و justify-items که تراز بندی یک آیتم درون سلول گرید خودش رو مشخص می کردند این ها هم دقیقا همون کار را می کنند و همان مقادیر را دارند با این تفاوت که فقط روی یک آیتم اعمال می شوندalign / justify selfاگه علاقه دارید با گرید یکم بازی کنید تا بهتر مسلط بشید به وب سایت زیر سر بزنید :) https://cssgridgarden.com/ اگه علاقه داری با فلکس باکس هم آشنا بشی توی پست زیر توضیح دادم https://vrgl.ir/fWWBK منابعCSS Tricks : A Complete Guide to Grid