Menu
97 35 94 66  info@samiaco.ir
02

معرفی CSS Grid و استفاده آن در طراحی سایت

معرفی CSS Grid و استفاده آن در طراحی سایت

ویژگی CSS Grid او را به عنوان قدرتمند ترین سیستم طراحی بندی سایت در بین طراحان معرفی کرده است .این خصوصیت و ویژگی در CSS می تواند برای طرح بندی سطر ها و ستون ها در سایت به کار گرفته شود . اهمیت Grid در طراحی مدرن سایت بسیار بالا می باشد و مشکلات بسیار زیادی را برای طراحان حل کرده است . ما در این مقاله قصد داریم نگاهی گذرا به این ویژگی مهم در CSS اشاراتی داشته باشیم . امروزه بیشتر مرورگر ها از این خصوصیت پشتیبانی می کنند . در ابتدا باید از خصوصیت grid در دایو(Div) اصلی استفاده نمایید و برای هر یک از المان های داخل آن خصوصیت و کلای grid_item را قرار دهید . در واقع کانتینر اصلی شامل Grid می باشد و المان های داخل آن شامل grid_item است . سپس می توان برای هر یک از کلاس ها ویژگی های مورد نظر خود را اعمال کرد که این کار در تصاویر زیر انجام شده است .


 

 

به این ترتیب شما تصویر پایین را در خروجی مشاهده می کنید . همچنین با استفاده از grid-template-columns در کلاس grid و همچنین به کاربردن fr که مخفف fraction می باشد می توانید از هر نوع از واحد های مقدار مانند (em ،rem ، px ) در این زمینه استفاده کنید .


البته روش های دیگری نیز برای نوشتن آن وجود دارد مانند روش زیر که می توان به سبک دیگر Grid رانوشت . همچنین برای فاصله بین آن ها می توانیم از خصوصیت grid-gap نیز استفاده کرد. استفاده از این خصوصیت می توان شکاف ها و فاصله های مورد نظر را بین ستون ها و سطرهای مورد نظر ایجاد کرد . توجه داشته باشید فاصله ایجاد شده در داخل ستون درست می شود و نه در بیرون ستون برای مشاهده زنده و تغییرات آن می توانید از codepad.co برای تغییرات و مشاهده آن به صورت آنلاین استفاده نمایید .

تعداد امتيازات: (1) Article Rating
تعداد مشاهده خبر: (106)
گروه خبر: طراحی سایت
کد خبر: 2081


  • معرفی CSS Grid و استفاده آن در طراحی سایت