یک صفحه HTML ساده بسازید و با استفاده از CSS Grid یک چیدمان شامل هدر در بالا، سه ستون محتوایی (چپ، میانی، راست) و یک فوتر در پایین ایجاد کنید که فاصله بین ستون‌ها 20px باشد و ستون میانی از دو ستون کناری پهن‌تر (مثلاً با واحد fr) باشد.

نکته کلیدی اینکه از display: grid روی کانتینر اصلی استفاده کنید و با grid-template-columns: 1fr 2fr 1fr سه ستون با فاصله 20px تعریف شود. برای واکنش‌گرایی بهتر، از واحدهای fr استفاده کنید و می‌توانید با استفاده از minmax حداقل عرض ستون‌ها را مشخص کنید تا ستون میانی همیشه نسبت به ستون‌های کناری پهن‌تر باشد. برای ثبات اندازه ها، box-sizing: border-box را روی همه عناصر اعمال کنید و از نام‌گذاری کلاس‌ها header, sidebar-left, content, sidebar-right و footer استفاده کنید تا ساختار HTML ساده بماند. برای مدیریت موقعیت هدر و فوتر، می‌توانید از grid-template-areas یا grid-row/column استفاده کنید تا چیدمان واضح و قابل پیش‌بینی باشد.