یک صفحه وب ساده طراحی کنید که با استفاده از CSS Grid Areas یک چیدمان 3x3 شامل مناطق header، sidebar، content، ads و footer را پیاده‌سازی کند به‌طوری‌که در صفحه‌های کوچک مناطق به صورت ستونی زیر هم قرار گیرند.

برای حل این مسأله از CSS Grid و خاصیت grid-template-areas استفاده کنید: یک کانتینر با display: grid تعریف کرده و با grid-template-columns و grid-template-rows شبکهٔ اولیه را بسازید و با grid-template-areas نام‌گذاری مناطق (مثلاً "header header header" و "sidebar content ads" و "footer footer footer") را انجام دهید. به عناصر داخلی کلاس یا id مشخص بدهید و با خاصیت grid-area آنها را به نواحی متناظر اختصاص دهید؛ برای واکنش‌گرایی از media query استفاده کنید تا در پهنای کم، قالب به یک ستون تغییر کند (defining new grid-template-areas برای موبایل). نکات مفید: از gap برای فاصله‌دهی استفاده کنید، نام‌های مناطق را داخل رشته‌ها در grid-template-areas قرار دهید و مطمئن شوید که هر عنصر دقیقا همان نام منطقه را در grid-area داشته باشد.