تصميم الخلايا الفارغة بالمحتوى المُنشأ وتخطيط شبكة CSS

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

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

لماذا لا يمكننا تصميم المناطق الفارغة بالفعل؟

تنص الفقرة الافتتاحية لمواصفات الشبكة ،

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

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

استخدام العناصر الزائدة كخطاف تصفيف

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

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

يدعو إريك ماير ، في مقالته A List Apart Faux Grid Tracks ، إلى استخدام العنصر b كعنصر فائض في اختيارك ، لأنه لا يمنح أي معنى دلالي ، فهو قصير وواضح أيضًا في الترميز باعتباره خطافًا.

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

استخدام المحتوى المُنشأ كخطاف تصميم

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

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

 <div class="grid"> <div class="item"></div> </div>

 .grid { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-gap: 10px; } .grid > * { border: 2px solid rgb(137,153,175); } .item { grid-column: 2; grid-row: 2; }

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

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

 .grid::before { content: ""; background-color: rgb(214,232,182); grid-column: 3; grid-row: 1; } .grid::after { content: ""; background-color: rgb(214,232,182); grid-column: 1; grid-row: 3; } 

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

حدود نهج المحتوى المُنشأ

ستصبح المشكلة الواضحة في هذا النهج واضحة إذا قررت أنك ترغب أيضًا في تصميم خلايا الشبكة العلوية اليمنى والسفلية اليسرى. يمكنك فقط تطبيق جزء واحد من المحتوى الذي تم إنشاؤه على الجزء العلوي والآخر على الجزء السفلي من الحاوية ، ولا يُسمح بالعناصر الزائفة متعددة ::before و ::after . لن تنجح الطريقة إذا كنت تريد إنشاء لوحة Chequerboard CSS Grid بنفسك! إذا وجدت أنك بحاجة إلى القيام بالكثير من تصميم الخلية الفارغة ، فمن المحتمل أن يكون نهج "Filler B's" الموضح أعلاه هو أفضل رهان لك في المستقبل المنظور.

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

عناوين خيالية

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

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

ترميزنا هو h1 بسيط.

 <h1>My heading</h1>

في قواعد h1 ، أقوم بإنشاء شبكة من ثلاثة أعمدة. تعطي قيمة grid-template-columns مسار 1fr ثم مسار auto وآخر نهائي بقيمة 1fr . سيشترك المساران 1fr في المساحة المتوفرة المتبقية بعد أن يأخذ العنوان المساحة التي يحتاجها للجلوس داخل المسار ذي الحجم auto .

لقد أضفت خاصية text-align بقيمة center بالترتيب بحيث يتم إدخال العنوان الخاص بي في المتصفحات بدون شبكة.

 h1 { text-align: center; display: grid; grid-template-columns: 1fr auto 1fr; grid-gap: 20px; }

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

السطر نفسه هو حد على العنصر الذي تم إنشاؤه.

 @supports (display: grid) { h1:before, h1:after { content: ""; align-self: center; border-top: 1px solid #999; } }

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

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

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

إضافة الخلفيات والحدود إلى مناطق التصميم الخاص بك

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

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

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

 <article class="grid"> <section class="section1"> <p>…</p> </section> <div class="full-width"> <img src=“placeholder.jpg” alt=“Placeholder”> </div> <section class="section2"> <p>…</p> </section> </article>

 .grid { display: grid; grid-template-columns: 1fr 20px 4fr 20px 1fr; grid-template-rows: auto 300px auto; grid-row-gap: 1em; } .section1 { grid-column: 3; grid-row: 1; } .section2 { grid-column: 3; grid-row: 3; } .full-width { grid-column: 1 / -1; grid-row: 2; background-color: rgba(214,232,182,.5); padding: 20px 0; }

هذا يعطيني التخطيط مع الصورة كاملة العرض وقسمين من المحتوى الموضوعة ؛ ومع ذلك ، إذا أضفت الخلفية إلى الأقسام ، فسوف تتوقف فوق row-gap بين section والصورة كاملة العرض.

 .section { background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); } 

إذا أزلنا grid-row-gap واستخدمنا الحشو لتوفير المساحة ، فلن يؤدي ذلك إلى تمكين تأثير الخلفية التي تعمل أسفل لوحة العرض الكامل.

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

 .grid::before { content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); } 

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

 .grid::before { content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); grid-column: 2 / 5; grid-row: 1 / 4; }

يمكنك رؤية المثال الكامل في CodePen هذا.

السيطرة على المكدس مع z-index

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

لتغيير هذا ، تحتاج إلى إعطاء هذا العنصر خاصية z-index أقل من أي شيء آخر. إذا لم يكن هناك شيء آخر يحتوي على قيمة z-index ، فإن أبسط ما يمكنك فعله هو إعطاء المحتوى الذي تم إنشاؤه z-index -1 . سيؤدي هذا إلى أن يكون أول شيء في المكدس ، باعتباره العنصر الذي يحتوي على أدنى z-index .

 .grid::after { z-index: -1; content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); grid-column: 2 / 5; grid-row: 1 / 4; }

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

هل هذا شيء قد تحله المواصفات في المستقبل؟

تبدو إضافة الخلفيات والحدود وكأنها ميزة مفقودة في مواصفات CSS Grid والتي ناقشها فريق العمل مع العديد من أعضاء المجتمع (موضوع المناقشة موجود على GitHub).

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

المزيد من الأمثلة ، من فضلك!

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