فهم شبكة CSS: خطوط الشبكة

في المقالة الأولى في هذه السلسلة ، ألقيت نظرة على كيفية إنشاء حاوية شبكة والخصائص المختلفة المطبقة على العنصر الأصل الذي يتكون من شبكتك. بمجرد أن يكون لديك شبكة ، يكون لديك مجموعة من خطوط الشبكة. في هذه المقالة ، ستتعلم كيفية وضع العناصر مقابل تلك السطور عن طريق إضافة خصائص إلى العناصر الفرعية المباشرة لحاوية الشبكة.

سوف نغطي:

1. خصائص الموضع grid-column-start grid-column-end grid-row-start grid-row-end grid-column grid-row وصف الشبكة.
2. كيفية استخدام grid-area لوضع رقم السطر.
3. كيفية وضع العناصر حسب اسم السطر.
4. الفرق بين الشبكة الضمنية والصريحة عند وضع العناصر.
5. باستخدام الكلمة الأساسية span ، مع القليل من شبكة subgrid إضافية.
6. ما الذي يجب الانتباه إليه عند خلط العناصر الموضوعة تلقائيًا والموضوعة.

• الجزء 1: إنشاء حاوية شبكية
• الجزء 2: خطوط الشبكة
• الجزء 3: مناطق قالب الشبكة

المفاهيم الأساسية لتحديد المواقع على أساس الخط

لوضع عنصر على الشبكة ، نقوم بتعيين السطر الذي يبدأ عنده ، ثم الخط الذي نريد أن ينتهي عنده. لذلك ، مع شبكة مكونة من خمسة أعمدة وخمسة صفوف ، إذا أردت أن يمتد العنصر الخاص بي إلى مسار العمود الثاني والثالث ، وسأستخدم مسارات الصف الأول والثاني والثالث CSS التالية. تذكر أننا نستهدف الخط وليس المسار نفسه.

 .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; }

يمكن أيضًا تحديد هذا كاختصار ، والقيمة قبل الشرطة المائلة للأمام هي سطر البداية ، والقيمة التالية هي سطر النهاية.

 .item { grid-column: 2 / 4; grid-row: 1 / 4; }

في CodePen ، يمكنك رؤية المثال وتغيير الأسطر التي يمتد عليها العنصر.

لاحظ أن السبب وراء امتداد خلفية الصندوق الخاص بنا على المنطقة بأكملها هو أن القيم الأولية لخصائص المحاذاة هي align-self وضبط justify-self ممتدة.

إذا كنت تريد فقط أن يمتد العنصر الخاص بك إلى مسار واحد ، فيمكنك حذف سطر النهاية ، لأن السلوك الافتراضي هو أن العناصر تمتد على مسار واحد. نرى هذا عندما نضع العناصر تلقائيًا كما في المقالة الأخيرة ، ينتقل كل عنصر إلى خلية - تمتد عمودًا واحدًا ومسار صف واحد. حتى تتسبب في امتداد عنصر من السطر 2 إلى 3 ، يمكنك كتابة:

 .item { grid-column: 2 / 3; }

سيكون من الصحيح تمامًا أيضًا تخطي سطر النهاية:

 .item { grid-column: 2; }

اختصار grid-area

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

 .item { grid-area: 1 / 2 / 4 / 4; }

ترتيب أرقام الأسطر هذه هو grid-row-start grid-column-start grid-row-end grid-column-end . إذا كنت تعمل بلغة أفقية ، مكتوبة من اليسار إلى اليمين (مثل الإنجليزية) ، فهذا أعلى ، يسار ، أسفل ، يمين. ربما تكون قد أدركت أن هذا هو عكس الطريقة التي نحدد بها عادةً الاختصارات مثل الهامش في CSS - هذه تعمل لأعلى ولليمين ولأسفل ولليسار.

والسبب في ذلك هو أن الشبكة تعمل بنفس الطريقة بغض النظر عن وضع الكتابة أو الاتجاه الذي تستخدمه ، وسنغطي ذلك بالتفصيل أدناه. لذلك ، فإن تعيين كلا البدايتين ثم كلا الطرفين يكون أكثر منطقية من تعيين القيم للأبعاد المادية للشاشة. لا أميل إلى استخدام هذه الخاصية في التنسيب المستند إلى السطر ، حيث أعتقد أن الاختصارات ثنائية القيمة الخاصة grid-column grid-row تكون أكثر قابلية للقراءة عند المسح من خلال ورقة أنماط.

خطوط على الشبكة الصريحة

لقد ذكرت الشبكة الصريحة مقابل الشبكة الضمنية في مقالي الأخير. الشبكة الصريحة هي الشبكة التي تقوم بإنشائها باستخدام خصائص grid-template-columns grid-template-rows . من خلال تحديد مسارات العمود والصف ، يمكنك أيضًا تحديد الخطوط بين تلك المسارات وفي حواف البداية والنهاية لشبكتك.

هذه السطور مرقمة. يبدأ الترقيم من 1 عند حافة البداية في اتجاه الكتلة والاتجاه المضمن. إذا كنت في وضع كتابة أفقي ، مع الجمل التي تبدأ من اليسار وتتجه نحو اليمين ، فهذا يعني أن السطر 1 في اتجاه الكتلة أعلى الشبكة ، والخط 1 في الاتجاه الداخلي هو اليسار خط.

إذا كنت تعمل بلغة RTL أفقية - كما قد تفعل إذا كنت تعمل باللغة العربية - فإن السطر 1 في اتجاه الكتلة لا يزال في الأعلى ، لكن السطر 1 في الاتجاه المضمَّن على اليمين.

إذا كنت تعمل في وضع الكتابة العمودي ، وفي الصورة أدناه قمت بضبط وضع writing-mode: vertical-rl ، فسيكون السطر 1 في بداية اتجاه الكتلة في وضع الكتابة هذا ، في هذه الحالة على اليمين. الخط 1 في الاتجاه الداخلي في الأعلى.

لذلك ، ترتبط خطوط الشبكة بوضع الكتابة واتجاه البرنامج النصي للمستند أو المكون.

خط نهاية شبكتك الصريحة هو رقم -1 ويتم عد الأسطر مرة أخرى من تلك النقطة ، مما يجعل السطر -2 هو الثاني من السطر الأخير. هذا يعني أنك إذا كنت تريد تمديد عنصر عبر جميع مسارات الشبكة الصريحة ، فيمكنك القيام بذلك باستخدام:

 .item { grid-column: 1 / -1; }

خطوط على الشبكة الضمنية

إذا قمت بإنشاء مسارات شبكة ضمنية ، فسيتم العد أيضًا من 1. في المثال أدناه ، قمت بإنشاء شبكة صريحة للأعمدة ، ومع ذلك ، تم إنشاء مسارات الصف في الشبكة الضمنية ، حيث أستخدم grid-auto-rows لحجم هذه 5em.

تم وضع العنصر الذي يحتوي على فئة تم placed ليمتد من سطر الصف 1 إلى سطر الصف -1. إذا كنا نعمل بشبكة صريحة لصفين لدينا ، فيجب أن يمتد العنصر إلى صفين. نظرًا لأنه تم إنشاء مسارات الصف في الشبكة الضمنية ، فقد تم حل السطر -1 على السطر 2 وليس السطر 3.

لا توجد طريقة حاليًا لاستهداف السطر الأخير من الشبكة الضمنية ، دون معرفة عدد السطور لديك.

وضع العناصر مقابل الخطوط المسماة

أوضحت في المقالة الأخيرة أنه بالإضافة إلى أرقام الأسطر ، يمكنك اختياريًا تسمية الأسطر على شبكتك. يمكنك تسمية الأسطر عن طريق إضافة اسم أو أسماء داخل أقواس مربعة بين أحجام مساراتك.

 .grid { display: grid; grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end]; }

بمجرد أن يكون لديك بعض الأسطر المسماة ، يمكنك تبديل رقم السطر بالاسم عند وضع العناصر الخاصة بك.

 .item { grid-column: main-start / main-end; } 

إذا كان سطرك يحتوي على عدة أسماء ، فيمكنك اختيار أيهما تريد عند وضع العنصر الخاص بك ، وسيتم حل جميع الأسماء في نفس السطر.

ملاحظة : هناك بعض الأشياء الممتعة التي تحدث عند تسمية الأسطر. ألق نظرة على مقالتي "تسمية الأشياء في CSS Grid Layout" للمزيد.

ماذا يحدث إذا كانت هناك عدة أسطر بنفس الاسم؟

تحصل على بعض السلوك المثير للاهتمام إذا كان لديك عدة سطور لها نفس الاسم. هذا موقف يمكن أن يحدث إذا قمت بتسمية الأسطر داخل تدوين repeat() . في المثال أدناه لدي شبكة من 8 أعمدة ، تم إنشاؤها عن طريق تكرار 4 مرات نمط 1fr 2fr . لقد قمت بتسمية الخط قبل المسار الأصغر sm والمسار الأكبر lg . هذا يعني أن لدي 4 أسطر مع كل اسم.

في هذه الحالة ، يمكننا بعد ذلك استخدام الاسم كفهرس. لذلك لوضع عنصر يبدأ من السطر الثاني المسمى sm ويمتد إلى السطر الثالث المسمى lg ، أستخدم grid-column: sm 2 / lg 3 . إذا كنت تستخدم الاسم بدون رقم ، فسيتم دائمًا حل السطر الأول بهذا الاسم.

استخدام الكلمة span

هناك مواقف تعلم فيها أنك تريد أن يمتد عنصر ما على عدد معين من المسارات ، ومع ذلك ، فأنت لا تعرف بالضبط المكان الذي سيقع فيه على الشبكة. من الأمثلة على ذلك المكان الذي تضع فيه العناصر باستخدام المواضع التلقائية ، ولكنك تريدها أن تمتد عبر مسارات متعددة بدلاً من الافتراضي 1. في هذه الحالة ، يمكنك استخدام الكلمة الأساسية " span ". في المثال أدناه ، يبدأ العنصر الخاص بي على الخط auto ، وهذا هو السطر الذي يضعه فيه الوضع التلقائي ، ثم يمتد بعد ذلك إلى 3 مسارات.

 .item { grid-column: auto / span 3; } 

ستصبح هذه التقنية مفيدة للغاية بمجرد حصولنا على دعم واسع لقيمة الشبكة subgrid grid-template-columns grid-template-rows . على سبيل المثال ، في تخطيط البطاقة حيث تحتوي البطاقات على رأس ومنطقة محتوى رئيسية تريد فيها المحاذاة مع بعضها البعض ، يمكنك أن تتسبب في امتداد كل بطاقة إلى صفين ، مع الاستمرار في السماح بسلوك الوضع التلقائي المعتاد. ستستخدم البطاقات الفردية subgrid (أي الحصول على صفين لكل منهما). يمكنك رؤية هذا في المثال أدناه إذا كنت تستخدم Firefox ، وقراءة مقالتي CSS Grid Level 2: Here Comes Subgrid لمعرفة المزيد عن الشبكة الفرعية.

/

طبقات العناصر مع التنسيب المستند إلى الخط

ستضع الشبكة العناصر تلقائيًا في خلايا فارغة على الشبكة ، ولن تقوم بتكديس العناصر في نفس الخلية. ومع ذلك ، باستخدام الموضع المستند إلى الخط ، يمكنك وضع العناصر في نفس خلية الشبكة. في هذا المثال التالي ، لدي صورة تمتد على مسارات من صفين ، وتعليق تم وضعه في المسار الثاني وإعطائه خلفية شبه شفافة.

سيتم تكديس العناصر بالترتيب الذي تظهر به في مصدر المستند. لذلك في المثال أعلاه ، تأتي التسمية التوضيحية بعد الصورة ، وبالتالي يتم عرضها أعلى الصورة. إذا جاءت التسمية التوضيحية أولاً ، فسينتهي الأمر بالظهور خلف الصورة ولن نتمكن من رؤيتها. يمكنك التحكم في هذا التراص باستخدام خاصية z-index . إذا كان من المهم أن تكون التسمية التوضيحية أولاً في المصدر ، فيمكنك استخدام z-index ، بقيمة أعلى للتعليق من الصورة. سيؤدي هذا إلى إجبار التسمية التوضيحية على الظهور أعلى الصورة بحيث يمكن قراءتها.

خلط قائم على الخط والتنسيب التلقائي

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

السلوك الافتراضي هو دائمًا التقدم للأمام ، وترك فجوة إذا كان العنصر لا يتناسب مع الشبكة. يمكنك التحكم في هذا السلوك باستخدام خاصية grid-auto-flow بقيمة dense . في هذه الحالة ، إذا كان هناك عنصر يناسب فجوة موجودة بالفعل في الشبكة ، فسيتم وضعه خارج ترتيب المصدر من أجل سد الفجوة. في المثال أدناه باستخدام التعبئة الكثيفة ، يتم الآن وضع العنصر 3 قبل العنصر 2.

لاحظ أن هذا السلوك يمكن أن يسبب مشاكل للمستخدمين الذين يتنقلون عبر المستند لأن التخطيط المرئي سيكون غير متزامن مع ترتيب المصدر الذي يتبعونه.

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

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

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

تغليف

هذا إلى حد كبير كل ما تحتاج لمعرفته حول خطوط الشبكة. تذكر أنه لديك دائمًا أسطر مرقمة ، بغض النظر عن كيفية استخدامك للشبكة ، يمكنك دائمًا وضع عنصر من رقم سطر إلى آخر. الطرق الأخرى التي سننظر إليها في المقالات المستقبلية هي طرق بديلة لتحديد التخطيط الخاص بك ، ولكنها تعتمد على الشبكة التي تم إنشاؤها بواسطة الأسطر المرقمة.

• الجزء 1: إنشاء حاوية شبكية
• الجزء 2: خطوط الشبكة
• الجزء 3: مناطق قالب الشبكة