شرح صفوف ومحتوى الفقرة
تطبيقاً لمنهجية الهاتف أولاً، تعرّف القاعدة الأساسية للحاوية .page-shell خارج أي استعلام وسائط عموداً مرناً واحداً grid-template-columns: 1fr; وترصّ المناطق الخمس عمودياً بالترتيب المنطقي القرائي، بحيث يصل زائر الهاتف إلى المحتوى الأساسي main قبل الملحقات الجانبية aside دون أي تمرير أفقي:
CSS
.page-shell {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
gap: 10px;
}