شرح صفوف ومحتوى الفقرة
والآن نضيف استعلامي min-width تصاعديين يعدّلان الحاوية .page-shell وحدها دون المساس بأي عنصر ابن! فعند عرض 768px للوحي نوسّع الشبكة إلى عمودين 180px 1fr لتستقر القائمة بجانب المحتوى، وعند عرض 1024px للحاسوب ننتقل إلى ثلاثة أعمدة 180px 1fr 200px مع grid-template-rows: auto 1fr auto; ليتمدد الصف الأوسط تلقائياً:
CSS
@media (min-width: 768px) {
.page-shell {
grid-template-columns: 180px 1fr;
grid-template-areas: "head head" "nav main";
}
}
@media (min-width: 1024px) {
.page-shell {
grid-template-columns: 180px 1fr 200px;
grid-template-areas: "nav main aside";
}
}