سلام وقتتون بخیر.

من در پاسخ قبلی برای درک موضوع ( grid - گرید ) لینکی واستون قرار دادم، ولی از مدل سوالتون مشخص هست که میخواین کاربردها و ارتباط دقیق بین گرید سیستم در طراحی و موقع پیاده سازی رو متوجه بشین، این لینک‌ها میتونه به شما کمک کنه:

لینک‌ اول:

https://uxplanet.org/everything-you-should-know-about-8-point-grid-system-in-ux-design-b69cb945b18d

لینک دوم:

https://material.io/design/layout/responsive-layout-grid.html

بعد از بررسی لینک‌های بالا به صورت دقیق، میتونین لینک زیر رو ببینید و با نحوه پیاده سازی اینا آشنا بشین.

لینک زیر صرفا برای اینه که با نحوه پیاده سازی آشنا بشین و مربوط به حوزه تخصص ui نیست، ولی آشنایی باهاش دید خوبی به شما میده که بدونین دلیل استفاده شما از گرید و کاریردش چیه.

لینک‌ سوم:

https://www.w3schools.com/css/css_grid.asp