طريقة الاستخدام
- اكتب الأعمدة (أحجام المسارات) والصفوف (أحجام المسارات). ولعمودين، تعطي القيمة 200px 1fr شريطاً جانبياً ثابتاً ومساحة رئيسية مرنة.
- اضبط الفجوة بين الأعمدة (px) والفجوة بين الصفوف (px)، وأعطِ الحاوية اسم الفئة.
- اكتب اسماً في اسم المنطقة المراد رسمها، واترك رسم مختاراً، ثم انقر الخلايا التي تنتمي إلى تلك المنطقة. واختر محو لإزالة خلايا.
- انسخ مربع CSS، أو راجع المعاينة، قبل أن تلصق القواعد في ورقة الأنماط لديك.
أحجام المسارات و repeat()
كل مسار حجم في الشبكة: طول بوحدة px أو نسبة مئوية، أو حجم مرن بوحدة fr يقتسم المساحة المتبقية بنسبة عدده، أو auto أو min-content أو max-content. ويعطي minmax(الحد الأدنى، الحد الأعلى) المسار مدى. وتشرح مواصفة CSS Grid Layout (باللغة الإنجليزية) كيف يُحسب كل حجم.
تكتب repeat(3, 1fr) المسار نفسه ثلاث مرات. وتنشئ repeat(auto-fill, minmax(200px, 1fr)) عدداً من المسارات يتسع له عرض الصندوق. ولأن هذا العدد يتوقف على الصندوق، يحتاج كل مسار في تكرار auto-fill أو auto-fit إلى حجم ثابت، ولا تستطيع الأداة رسم مناطق مسماة فوقه.
grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: row-gap column-gap;المناطق المسماة
تأخذ الخاصية grid-template-areas سلسلة واحدة لكل صف من الشبكة. وأسماء السلسلة هي خلايا ذلك الصف، والنقطة تمثل خلية ليست في أي منطقة. ويجب أن تملأ كل منطقة مستطيلاً واحداً، لأن المتصفح لا يستطيع وضع اسم في شكل حرف L أو في كتلتين منفصلتين.
تضع الحاوية الأسماء على الشبكة، ويأخذ كل عنصر ابن مكانه بالخاصية grid-area. وتكتب الأداة قاعدة لكل اسم، فيملأ العنصر ذو الفئة المسماة خلاياه.
- استعمل صفاً واحداً من الأسماء لكل صف من المسارات، بعدد الأسماء نفسه في كل صف.
- اختر أسماء تصف جزءاً من الصفحة، مثل header أو sidebar أو main، لأن القواعد تُكتب بهذه الأسماء فئات.
مثال محلول: صفحة فيها رأس وشريط جانبي ومحتوى وتذييل
التخطيط الافتراضي عمودان، 200px و1fr مرن، وثلاثة صفوف: auto للرأس، و1fr للوسط، وauto للتذييل. الفجوة 16 px في الاتجاهين. يُرسم الرأس عبر العمودين، ويتقاسم الشريط الجانبي والمحتوى الرئيسي الصف الأوسط، ويُرسم التذييل عبر العمودين في الأسفل.
يبدأ CSS بالقاعدة .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } ثم grid-template-areas بثلاثة صفوف: "header header" و"sidebar main" و"footer footer". ولكل اسم قاعدته الخاصة مع grid-area، فيملأ عنصر الرأس الصف الأول.
الأسئلة الشائعة
ما الفرق بين fr وauto؟
يقتسم مسار fr المساحة المتبقية بعد المسارات الثابتة بنسبة عدده، فإن 1fr 2fr يعطي المسار الثاني ضعف عرض الأول. أما مسار auto فيكون بعرض ما يحتاجه محتواه، ثم يقتسم أي مساحة فائضة.
لماذا لا أستطيع رسم المناطق فوق مسارات auto-fill؟
يحدد auto-fill وauto-fit عدد المسارات من عرض الصندوق، فلا يُعرف عدد الخلايا وأنت تحرر. والمناطق المسماة تحتاج عدداً ثابتاً، لذلك تطلب الأداة إزالة auto-fill أو auto-fit عند رسم المناطق.
لماذا تأخذ كل منطقة قاعدتها الخاصة؟
تضع grid-template-areas الأسماء على الشبكة، لكن كل عنصر لا يزال عليه أن يحدد الخلية التي يملؤها، وهذا ما تفعله grid-area. وتكتب الأداة قاعدة لكل اسم، مستعملة فئة بالاسم نفسه.
ماذا يحدث للخلايا التي لم أرسمها؟
تُكتب الخلية التي ليست في أي منطقة نقطةً في grid-template-areas. ولا توضع فيها أي منطقة مسماة، فتبقى فارغة ما لم تضع فيها عنصراً بطريقة أخرى.
أي المتصفحات تدعم شبكة CSS؟
تدعم شبكة CSS كل المتصفحات الكبرى الحديثة. فإذا كان زوارك يستعملون إصدارات قديمة، فتحقق من التخطيط فيها قبل الاعتماد على المناطق المسماة.
هل يُرسل تخطيطي أو يُحفظ؟
لا. تُصنع الشبكة والمعاينة وكود CSS داخل متصفحك، ولا يُخزَّن شيء ولا يُرسل إلى خادمنا، فانسخ CSS قبل أن تغادر الصفحة.
المصادر
- W3C: CSS Grid Layout Module Level 1 (باللغة الإنجليزية)
- W3C: CSS Grid Layout Level 1، grid-template-areas (باللغة الإنجليزية)
- W3C: CSS Gaps Module Level 1، اختصار gap (باللغة الإنجليزية)
- MDN: grid-template-areas (باللغة الإنجليزية)
آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.