عندما تتعلم أولاً كيفية استخدام تخطيط الشبكة ، يمكنك البدء بوضع العناصر على الشبكة بأرقام الأسطر. في هذه الحالة ، من الضروري مراقبة أين توجد خطوط معينة على الشبكة ، وتذكر أن تسلسل أرقامها يتم عكسه إذا تم عرض الموقع للغات المكتوبة من اليمين إلى اليسار.
استنادًا إلى نظام الخط هذا ، تعمل التقنيات التي تجعل من الممكن تسمية الخطوط وحتى مناطق الشبكة. يتيح لك استخدام هذه التقنيات وضع العناصر حسب الاسم وليس الرقم. في هذه المقالة ، سألقي نظرة تفصيلية على
الطرق المختلفة لتسمية الخطوط والمناطق في تخطيطات CSS Grid ، بالإضافة إلى بعض الميزات المثيرة للاهتمام التي ينشئونها.
من المترجم:
مقال منذ عامين (2017) ، لكنه يتطرق إلى الميكانيكا المهمة لشبكة CSS الوظيفية ، وبالتالي يبدو مفيدًا وذات صلة اليوم.
تسمية الخط
لنبدأ بتسمية خطوط الشبكة. في المثال أدناه ، توجد شبكة بها ستة مسارات أعمدة صريحة ومسار خط صريح واحد. يتم وضع العناصر على الشبكة باستخدام أرقام الأسطر.
.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } .header { grid-row: 1; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: 1 / 3; } .content { grid-row: 2; grid-column: 3 / -1; }
إذا لزم الأمر ، يمكن تحديد أسماء الأسطر داخل أقواس مربعة في قائمة المسارات. من المهم أن تتذكر هنا أنك سمّيت السطر وليس المسار الذي يتبعه. بعد تسمية الخطوط ، يمكنك استخدام أسمائهم بدلاً من الأرقام عند وضع العناصر على الشبكة.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; } .header { grid-row: header-start; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; }
يمكن أن يكون الاسم أي شيء آخر غير الكلمة الأساسية
span . لأسباب ستتعلمها لاحقًا في هذه المقالة ، فإن التسمية باستخدام لاحقة
-start للخطوط الرئيسية (لا يهم إذا كان سطرًا أو سطرًا) ،
-end يعد ممارسة جيدة. يجب أن تكون النتيجة
main-start main-end أو
sidebar-start sidebar-end .
في كثير من الأحيان ، يتزامن السطر النهائي لجزء واحد من الشبكة وخط البداية للجزء الآخر ، ولكن هذه ليست مشكلة ، حيث يمكن أن تحتوي الأسطر على عدة أسماء. يمكنك تحديد سطور بعدة أسماء عن طريق إضافتها عبر مسافة داخل الأقواس المربعة.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } .header { grid-row: header-start; grid-column: full-start / full-end; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } .content { grid-row: 2; grid-column: main-start / main-end; }
يوضح هذا المثال أنك لست مضطرًا إلى تسمية كل سطر شبكة فردي ، وأن أرقام الأسطر التي يمكن استخدامها بالإضافة إلى الأسماء متاحة دائمًا.
Codepen 1.
تسمية الخطخطوط بنفس الاسم.
لقد رأينا كيف يمكن أن تحتوي الأسطر على العديد من الأسماء ، ولكن هناك أيضًا مواقف يكون فيها العديد من الأسطر لها نفس الاسم. يحدث هذا إذا كنت تستخدم الدالة
repeat() وقمت بتضمين الأسطر المسماة في قائمة المسارات. المثال التالي يُنشئ ستة خطوط مسماة ، يُسمى بالتناوب
col-a-start و
col-b-start .
.grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); }
إذا قمت بتحديد
col-a-start عند تحديد موضع عنصر ، فسيتم وضعه في السطر الأول الذي يصادفه الاسم
col-a-start (والذي سيكون في السطر الأول في الشبكة الموضحة في الاعتبار). وفقًا لنفس المبدأ ، إذا قمت بتحديد
col-b-start عند وضع عنصر ، فسيتم وضعه على خط الشبكة الثاني.
إذا كنت بحاجة إلى تحديد موضع في الأسطر التالية ، فأضف رقمًا بعد الاسم للإشارة إلى أي سطر من السطر بنفس الاسم يجب وضع العنصر
.box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; }
Codepen 2.
خطوط بنفس الاسم.وصف
المواصفات هذا السلوك كـ "إنشاء مجموعة مسماة خطوط الشبكة."
حفظ أسماء الأسطر عند إعادة إنشاء شبكة تكيفية
استخدام أرقام الأسطر أو أسمائهم ، عليك أن تقرر. كقاعدة عامة ، يمكن أن تكون الخطوط مفيدة في المواقف التي تريد فيها تغيير بنية الشبكة كجزء من استعلام الوسائط. بدلاً من تتبع الخط الذي تضعه العناصر في نقاط تحكم مختلفة ، سيكون من الممكن العمل بخطوط مسماة بالتسلسل.
في المثال البسيط التالي ، أقوم بتعريف أعمدة الشبكة لشاشة ضيقة ، ثم أعد تعريفها بعرض 550 بكسل.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; } @media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } }
Codepen 3.
تسمية الأشياء: إعادة تحديد موضع الخطوط المسماةالمناطق المسماة
قبل ذلك ، درسنا الخطوط المسماة فقط ، ولكن هناك طريقة أخرى. يمكننا تسمية مناطق الشبكة.
منطقة الشبكة هي منطقة مستطيلة تتكون من خلية شبكة واحدة أو أكثر. يتم تعريف المنطقة بأربعة خطوط شبكة تشير إلى خطوط البداية والنهاية للأعمدة والصفوف.
نقوم بتسمية مناطق الشبكة باستخدام خاصية
grid-template-areas . تصف هذه الخاصية التخطيط في شكل جدول ASCII وهي عبارة عن مجموعة من الخطوط ، يصف كل منها مسار سطر منفصل للشبكة.
.grid { display: grid; grid-template-columns: repeat(3, 1fr 2fr) ; grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; }
يتم تعيين الأسماء التي نستخدمها في صفوف خاصية
grid-template-areas إلى الأطفال المباشرين للشبكة باستخدام خاصية
grid-area . قيمة هذه الخاصية ، عند استخدامها للتسمية ، هي ما يسمى
معرف المستخدم ، لذلك لا يلزم تضمينها بين علامات اقتباس
.header { grid-area: head; } .sidebar { grid-area: side; } .content { grid-area: main; } .footer { grid-area: foot; }
من أجل جعل المساحة تغطي أكثر من خلية واحدة عند وصف بنية الشبكة باستخدام خاصية
grid-template-areas ، تحتاج إلى إعادة تسجيل معرفها عدة مرات على طول صف أو عمود. يجب أن تكون المساحة التي تم إنشاؤها مستطيلًا ، ولا يُسمح بالمساحات على شكل حرف T و T. يمكنك أيضًا إنشاء منطقة مستطيلة واحدة لكل اسم - لا يُسمح بالمساحات المنفصلة. تشير المواصفات إلى ما يلي:
"قد يتم السماح بالمناطق غير المستطيلة أو المنفصلة في الإصدارات المستقبلية من هذه الوحدة"
- الملكية قالب شبكة المناطق
عند وصف إحدى الشبكات ، يجب أن تهتم بعرضها التقديمي الكامل ، وإلا فسيتم تجاهل الإعلان بالكامل باعتباره غير صالح. هذا يعني أنه يجب ملء كل خلية شبكة.
grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; }
نظرًا لأنك قد ترغب في ترك بعض الخلايا في العلامة فارغة ، فإن المواصفات تحدد رمز نقطة
. أو سلسلة من النقاط بدون مسافات بينها
.... كعلامة لخلية فارغة
grid-template-areas: "head head head head head head" "side side main main main main" "....... ....... foot foot foot foot"; }
Codepen 4.
المناطق المسماةإذا لم تكن قد قمت بالفعل بتنزيل Firefox للاستفادة من أحدث ميزات Firefox DevTools Grid Inspector ، فإنني أوصي بالقيام بذلك عند العمل مع المناطق المحددة
عرض توضيحي للمناطق المسماة في "مفتش الشبكة" لمتصفح Firefox ( افتح النسخة الأصلية )خطوط شكل المناطق
نأتي الآن إلى الجزء المثير للاهتمام من عطلة كاملة من التسمية. قد تتذكر أنه عندما نظرنا إلى الأسطر المحددة ، اقترحت استخدام اتفاقية إنهاء الأسطر التي تحدد بداية المنطقة باستخدام
-start ، نهاية المنطقة باستخدام
-start نهاية. والسبب في ذلك هو أنه إذا قمت بتسمية الأسطر بهذه الطريقة ، فستنتهي بمساحة شبكة بهذا الاسم ، ويمكنك وضع عنصر فيها عن طريق تعيين هذا الاسم من خلال خاصية
grid-area .
في المثال التالي ، بالنسبة لكل من الصفوف والأعمدة ، أسمي
panel-start panel-end . هذا سوف يعطيني منطقة تسمى لوحة. إذا قمت بتعيينها كقيمة لخاصية
grid-area لعنصر على الصفحة ، فسيضع ذلك العنصر في المنطقة المحددة بواسطة هذه الأسطر
.grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr; grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end]; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-area: panel; }
Codepen 5. المناطق التي شكلت
من خطوط اسمهيتم تشكيل خطوط من المناطق المحددة
يمكننا أيضًا القيام بعكس ما هو موضح أعلاه ، وذلك باستخدام خطوط تم إنشاؤها من مناطق محددة. تقوم كل منطقة بإنشاء أربعة أسطر مسماة باستخدام نفس اصطلاح اللاحقة مثل
-start -end . إذا كانت هناك منطقة محددة تسمى
main ، فسيتم استدعاء خطوط البداية والنهاية وسطر الأعمدة
main-end . هذه الخطوط المسماة يمكن استخدامها لوضع عنصر.
في المثال التالي ، أضع اللوحة باستخدام أسماء هذه الخطوط التي تم إنشاؤها تلقائيًا:
.grid { display: grid; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-column: main-start / main-end; grid-row: head-start / foot-end; }
Codepen 6.
خطوط شكل من المناطق المسماةأسماء الخطوط المكافئة لاسم المنطقة
بالإضافة إلى الأسطر التي تحتوي على
-end ، يتم إنشاء خطوط للوجوه لأي منطقة شبكة باسم هذه المنطقة. وبالتالي ، إذا كانت هناك منطقة
main ، فيمكنك استخدام المعرف
main كقيمة لخصائص
grid-column-start grid-row-start grid-column-start أو
grid-row-start grid-column-start ، وسيتم تحديد موقع المحتوى من بداية هذه المنطقة. إذا استخدمت هذه القيمة لخاصية
grid-column-end grid-row-end grid-column-end أو خاصية
grid-column-end ، فسيتم تحديد سطر النهاية لهذه المنطقة. في المثال أدناه ، أقوم
.panel عنصر
.panel من بداية
main إلى نهاية
main للأعمدة ، ومن بداية
main إلى نهاية
foot للخطوط
.panel { grid-column: main; grid-row: main / foot ; }
Codepen 7.
أسماء الخطوط المكافئة لاسم المنطقةشرح خاصية شبكة المنطقة
من المفيد أن تعرف شيئًا عن خاصية
grid-area . بشكل أساسي ، ما نقوم به عند استخدام
grid-area ذات المعرف مثل
main هو كيفية وصف الأسطر الأربعة للمنطقة. القيم الصالحة لخاصية
grid-area هي أيضا أرقام أسطر.
.main { grid-area: 2 / 1 / 4 / 3; }
هذا له نفس تأثير الإدخال:
.main { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 3; }
عندما تسأل
.main { grid-area: main; }
هذا يعني في الواقع:
.main { grid-area: main / main / main / main ; }
تتصرف خاصية
grid-area بشكل مختلف قليلاً عند استخدام معرف المستخدم ، بدلاً من رقم سطر. عند استخدام أرقام الأسطر للقيم الأولية في خاصية
grid-area ، سيتم تلقائيًا تعيين أي رقم لسطر نهاية لا تحدده تلقائيًا ، وبالتالي ، سيتم استخدام تحديد الموقع التلقائي لتحديد مكان وضع العنصر.
ومع ذلك ، إذا استخدمت معرف مستخدم وتخطيت بعض الخطوط ، فسيتم تعيينها على النحو التالي
ثلاثة أسماء الخطوط المحددة
.main { grid-area: main / main / main ; }
إذا قمت بتحديد أسماء ثلاثة أسطر ، فستفتقد أساسًا
grid-column-end . إذا كان
grid-column-start معرف مستخدم ، فسيتم أيضًا تعيين نفس المعرّف
grid-column-end . كما رأينا بالفعل ، ستستخدم خاصية نهاية الواجهة الوجه النهائي
main ، لذلك إذا
grid-column-end تعيين
grid-column-start grid-column-end على نفس الاسم ، فسيتم تمديد المحتوى ليشمل جميع أعمدة هذه المنطقة.
اثنين من أسماء الخطوط المحددة
.main { grid-area: main / main ; }
عند تحديد اسمين فقط ، يتم تعيين خطوط البدء للصفوف والأعمدة. إذا كانت
grid-column-start و / أو
grid-row-start عبارة عن معرف مستخدم ، فسيتم تعيين
grid-column-end grid-row-end على نفس القيمة ، على التوالي.
اسم سطر واحد محدد
.main { grid-area: main ; }
إن تحديد اسم سطر واحد هو بالضبط ما تفعله عندما تقوم بتعيين منطقة الشبكة على الاسم الرئيسي للمنطقة. في هذه الحالة ، يتم تعيين الأسطر الأربعة على هذه القيمة.
ملاحظة :
هذا يعمل مع كل من grid-column grid-row .تعني هذه الطريقة بالفعل أنه يمكنك تعيين مجموعة من الأعمدة أو الصفوف في شبكة لوضع عنصر. نظرًا
-end القيم نهاية لخاصية
grid-area على نفس القيم مثل القيم الأولية (عند الحذف) ، تتصرف القيم النهائية لخصائص
grid-row أيضًا. هذا يعني أنه يمكنك وضع العنصر بين سطور عمود البداية والنهاية في المنطقة
main باستخدام:
.main { grid-column: main ; }
في
شرح Breaking Out with CSS Grid ، أوضحت كيف يتم استخدام هذه الميزة لإنشاء أنماط تصميم مفيدة للمناطق كاملة الحجم التي تتجاوز مساحة المحتوى المحدودة.
يمكن أن تحتوي الشبكة على العديد من الخطوط المسماة.
كل ما سبق يعني أن الشبكة كنتيجة يمكن أن تحتوي على عدد كبير من الخطوط المسماة. في معظم الحالات ، يجب أن لا تقلق بشأن هذا. العمل مع الخطوط التي تحتاج إليها وتجاهل وجود الآخرين.
تسمية وخصائص الشبكة وقوالب الشبكة المختصرة
يحتوي CSS Grid على اثنين من الاختصارات التي تسمح لك بتعيين العديد من خصائص الشبكة في بناء جملة واحد مضغوط. شخصيا ، يبدو من الصعب بما فيه الكفاية بالنسبة لي أن أدرك. عندما أناقش هذا الأمر مع مطورين آخرين ، تنقسم الآراء: بعضهم مثلهم ، والبعض الآخر يفضل استخدام خصائص منفصلة. كما هو الحال في الاختصارات الأخرى ، يجب أن نتذكر أنه سيتم إعادة تعيين قيم الخصائص التي لا تستخدمها فيها إلى الأصل.
اختصار قالب الشبكة: إنشاء شبكة واضحة
يمكنك استخدام اختصار
grid-template لتعيين كافة خصائص شبكة صريحة في مكان واحد في وقت واحد
grid-template-columns grid-template-rows grid-template-areas
هذا يعني أنه يمكنك تحديد الخطوط المسماة والمناطق المسماة في نفس الوقت. عند استخدام خاصية تجمع بين المناطق والخطوط المحددة ، أود أولاً تحديد قيمة خاصية
grid-template-areas ، كما هو موضح في القسم أعلاه.
ثم قد ترغب في إضافة أسماء الخطوط. يتم وضعها في بداية ونهاية كل سطر من القيم - تذكر أن كل سطر من القيم يمثل مسار خط. يجب أن يكون اسم أو أسماء السلاسل داخل الأقواس المربعة ، تمامًا كما هو الحال عند تسمية الأسطر في خاصية
grid-template-rows ، ويجب أن يكون خارج علامات الاقتباس المحيطة بسلسلة القيم التي تحدد مسار الخط.
في المثال أدناه ، قمت بتسمية خطين:
panel-start بعد خط الرأس (خط شبكة السطر الثاني)
panel-end بعد خط التذييل الأخير (خط الشبكة الرابع مع ثلاثة مسارات خطية). لقد حددت أيضًا حجم مسار الخط للخطوط المسماة وغير المسماة بإضافة معلمة في نهاية سطر القيمة تصف مسار الخط هذا
.grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end]; }
إذا كان من الضروري أيضًا تسمية الأعمدة ، فلا يمكننا القيام بذلك داخل السطر ، لذلك نحتاج إلى إضافة الفاصل
/ ، ثم تحديد قائمة بمسارات الأعمدة. يتم تسمية الخطوط تمامًا كما لو كانت هذه القائمة هي قيمة خاصية
grid-template-columns .
.grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; }
في هذا المثال ، الذي يمكنك رؤيته في مخطط الشفرة أدناه ، أقوم بإنشاء مجموعة إضافية من الأسطر للصفوف والأعمدة ، حيث تحدد هذه الخطوط منطقة تسمى
panel ، حيث أنني استخدمت
panel-start بناء الجملة
panel-end . بهذه الطريقة يمكنني وضع العنصر عن طريق تعيين قيمة
panel لخاصية
grid-area .
للوهلة الأولى ، يبدو هذا غير مفهوم إلى حد ما. لذلك ، هنا ننشئ قائمة بالأعمدة التي تصطف وفقًا لجدول ASCII المحدد أعلاه. اختياريًا ، أضف مسافات بين القيم لمحاذاة تعريف
template-areas template-columns .
Codepen 8.
اختصار -template الشبكة
اختصار الشبكة: شبكة ضمنية وصريحة
تفترض المواصفات أنه إذا كنت بحاجة إلى تعريف شبكة ضمنية بشكل منفصل ، فيجب عليك استخدام خاصية
grid المختصرة بدلاً من
grid-template . تقوم
grid الاختصارات
grid تعيين جميع القيم الضمنية التي لم تقم بتعيينها. وبالتالي ، فإنه يسمح لك بتعيين وإعادة تعيين الخصائص التالية
grid-template-columns grid-template-rows grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow
لأغراضنا ، سيكون استخدام اختصار
grid مماثلًا لاستخدام
grid-template ، حيث أننا نعرّف تعريف الشبكة الضمني. سيكون الاختلاف الوحيد في إعادة تعيين خصائص
grid-auto–* . يمكن استخدام اختصار
grid إما لتعيين الشبكة الصريحة وإعادة تعيين الخصائص الضمنية ، أو لتعيين الشبكة الضمنية وإعادة تعيين الخصائص الصريحة. القيام بالأمرين معا في نفس الوقت لا معنى له
.grid { display: grid; grid-gap: 20px; grid: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; }
ملاحظة :
في الإصدار الأصلي الموصى به من مواصفات CSS Grid ، يقوم هذا التخفيض أيضًا بإعادة تعيين خصائص الفجوة بين خلايا grid-row-gap grid-column-gap وخلايا grid-row-gap . ومع ذلك ، تم تغيير هذا السلوك في نهاية المطاف. تقوم المتصفحات بتحديث هذا السلوك ، ولكن في وقت كتابة هذا التقرير (أكتوبر 2017) ، لا يزال بإمكانك مواجهة موقف حيث يتم إعادة تعيين قيمة خصائص gap إلى صفر عند استخدام التخفيض ، لذلك قد تحتاج إلى إعادة تعريفها لاحقًاأي نهج للاستخدام؟
قد تسأل أي من هذه الأساليب هي الأفضل استخدام لمهمة محددة؟ لا توجد قواعد صارمة. أنا شخصياً أحب استخدام
grid-template-areas للمكونات عندما أعمل في مكتبة القوالب الخاصة بي. من المريح أن يكون لديك هيكل المكون مباشرة أمام عينيك مباشرة في CSS
grid-template-areas مما يجعل من السهل تجربة خيارات تخطيط مختلفة عند اختباره. لقد وجدت أنه بسبب هذه الحركة البسيطة للخلايا الشبكية ، من المهم التأكد من أن الترتيب المرئي والمنطقي للخلايا المكونة لا يتأثر. سيحدد الزوار الذين يتفاعلون مع موقعك باستخدام لوحة المفاتيح ، والذين يقومون بالتبديل بين العناصر باستخدام الزر Tab ، العناصر بالترتيب الذي تم تعريفهم به في الترميز. تأكد من إعادة ترتيب المخطط بمجرد تحديد الطريقة الأنسب لعرض المحتوى الخاص بك. لمعرفة المزيد حول هذه المشكلة ، أقترح قراءة المقالة
CSS Grid Layout and Accessibility .
اصطلاحات التسمية الأساسية
لتلخيص المقال ، سألخص بعض القواعد الأساسية التي يجب وضعها في الاعتبار عند تسمية خطوط أو مناطق من CSS Grid:
تسمية الخط:- يمكنك استخدام أي اسم تقريبًا (باستثناء الكلمة الرئيسية span) ، ولكن يمكنك أيضًا استخدام المنطقة التي تم إنشاؤها من هذه السطور إذا كانت أسمائها تنتهي بـ
-start و -end - يمكن أن تحتوي الخطوط على أسماء متعددة محددة داخل أقواس مربعة ومفصولة بمسافة
- خطوط متعددة قد يكون لها نفس الاسم ؛ إذا كنت بحاجة إلى رقم معين ، فما عليك سوى إضافة رقم السطر الضروري بعد الاسم بالترتيب
مناطق التسمية:- عند تحديد مساحة باستخدام
grid-template-areas ، يجب أن يكون شكل المنطقة مستطيلًا - عند استخدام خاصية
grid-template-areas الشبكة ، يتم تمثيل كل مسار من خطوط الشبكة كسلسلة من القيم ويتم عرضه بين علامات اقتباس - يجب ملء كل خلية. إذا كنت تريد حسب التصميم ترك بعض الخلايا فارغة ، فاستخدم نقطة لذلك
. أو الحذف ... لا مسافات - تنشئ المناطق المسماة أسطرًا بنفس اسم المنطقة ، ولكن مع
-end -start -end . يمكن استخدامها لوضع العناصر.