75. اختصارات الشبكة

يحتوي Grid على العديد من الاختصارات القوية لدمج خصائص القوالب والموضع في سطور مفردة وسهلة القراءة.

1. grid-area (اختصار الموضع)

عند وضع عنصر بواسطة أرقام الخطوط، يمكن لـ grid-area دمج جميع خصائص الموضع الأربعة (row-start, column-start, row-end, column-end).

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

css .item-a { /* يبدأ عند خط الصف 2، خط العمود 3، ينتهي عند خط الصف 4، خط العمود 4 */ grid-area: 2 / 3 / 4 / 4; }

2. اختصار grid (تعريف القالب)

تسمح لك خاصية grid الرئيسية بتعريف كل من الصفوف والأعمدة، مع تضمين المناطق اختيارياً، بتنسيق موجز للغاية. هذا معقد ولكنه قوي للغاية لتعريف التخطيطات الكاملة.

grid: <grid-template-rows> / <grid-template-columns>;

مثال مع المناطق والأحجام

css .full-layout { display: grid; /* تعريف الصفوف أولاً، ثم فاصل / ، ثم الأعمدة / grid: / تعريف الصفوف / [r1-start] "header header header" 50px [r1-end] [r2-start] "nav main aside" auto [r2-end] [r3-start] "footer footer footer" 30px [r3-end] / / تعريف الأعمدة */ [c1] 1fr [c2] 2fr [c3] 1fr [c4]; }

ملاحظة: بينما تعد grid قوية، غالباً ما يبدأ المبتدئون بالخصائص المفصلة (grid-template-columns, grid-template-areas) من أجل وضوح أفضل.