إنه هنا، مستقبل تخطيطات البناء على الويب! بعد الأساس الذي وضعته Mozilla، وسنوات من الجهد الذي بذله فريق WebKit التابع لشركة Apple، والعديد من جولات النقاش في مجموعة عمل CSS مع جميع المتصفحات، أصبح الآن من الواضح كيف يعمل هذا الأمر.
تقديم ممرات شبكة CSS.
.container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;}جربه اليوم في”https://developer.apple.com/safari/resources/”> معاينة تقنية سفاري 234.
كيف تعمل الممرات الشبكية
دعونا نحلل بالضبط كيفية إنشاء هذا التصميم الكلاسيكي.
أولا، HTML.
رئيسي فصل="container"> شكل>img src="photo-1.jpg">شكل> شكل>img src="photo-2.jpg">شكل> شكل>img src="photo-3.jpg">شكل> رئيسي>لنبدأ بالتقديم display: grid-lanes إلى main عنصر لإنشاء حاوية شبكة جاهزة لعمل هذا النوع من التخطيط. ثم نستخدم grid-template-columns لإنشاء “الممرات” بكامل قوة CSS Grid.
في هذه الحالة سنستخدم repeat(auto-fill, minmax(250px, 1fr)) لإنشاء أعمدة مرنة بعرض 250 بكسل على الأقل. سيحدد المتصفح عدد الأعمدة التي سيتم إنشاؤها، وملء كل المساحة المتاحة.
وثم، gap: 16px يعطينا فجوات بمقدار 16 بكسل بين الممرات، وفجوة 16 بكسل بين العناصر الموجودة داخل الممرات.
.container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px;}هذا كل شيء! في ثلاثة أسطر من CSS، بدون استعلامات وسائط أو استعلامات حاوية، أنشأنا تخطيطًا مرنًا يعمل على جميع أحجام الشاشات.
فكر في الأمر وكأنه طريق سريع للسيارات في حركة مرور متواصلة.
تماما مثل الكلاسيكية”https://masonry.desandro.com/”> مكتبة الماسونية، عندما يقرر المتصفح مكان وضع كل عنصر، يتم وضع العنصر التالي في العمود الأقرب إلى أعلى النافذة. وكما هو الحال مع حركة المرور، تقوم كل سيارة “بتغيير مسارها” لينتهي بها الأمر في المسار الذي يجعلها “تتقدم إلى أبعد مسافة”.
يتيح هذا التخطيط للمستخدمين إمكانية التنقل عبر الممرات للوصول إلى كل المحتوى المرئي حاليًا (وليس أسفل العمود الأول الموجود أسفل الجزء المرئي إلى أسفله، ثم العودة إلى أعلى العمود الثاني). كما أنه يتيح لك إنشاء موقع يستمر في تحميل المزيد من المحتوى أثناء قيام المستخدم بالتمرير، بشكل لا نهائي، دون الحاجة إلى JavaScript للتعامل مع التخطيط.
قوة الشبكة
أحجام حارة متفاوتة
لأن Grid Lanes يستخدم القوة الكاملة لـ CSS Grid لتحديد الممرات المستخدمة”https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns”>grid-template-*، فمن السهل إنشاء أشكال مختلفة من التصميم الإبداعي.
على سبيل المثال، يمكننا إنشاء تخطيط مرن مع أعمدة ضيقة وواسعة بالتناوب – حيث يكون العمودان الأول والأخير ضيقين دائمًا، حتى مع تغير عدد الأعمدة مع حجم إطار العرض. ويتم تحقيق ذلك مع grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr).
هناك عالم كامل من الاحتمالات باستخدام grid-template-* بناء الجملة.
العناصر الممتدة
نظرًا لأن لدينا القوة الكاملة لتخطيط الشبكة، يمكننا أيضًا تمديد الممرات بالطبع.
main { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr)); gap: 2lh;}article { grid-column: span 1; }@media (1250px width) { article:nth-child(1) { grid-column: span 4; } article:nth-child(2), article:nth-child(3), article:nth-child(4), article:nth-child(5), article:nth-child(6), article:nth-child(7), article:nth-child(8) { grid-column: span 2; }}تم تعيين جميع الجمل التشويقية للمقالة أولاً لتمتد إلى عمود واحد. بعد ذلك، يُطلب من العنصر الأول تحديدًا أن يمتد إلى 4 أعمدة، في حين أن العنصر الثاني – الثامن يمتد إلى عمودين. يؤدي هذا إلى إنشاء تصميم رسومي أكثر ديناميكية بكثير من التصميم المتماثل النموذجي، كل شيء بنفس العرض، وكل شيء بنفس التخطيط الذي سيطر على العقد الماضي.
وضع العناصر
يمكننا أيضًا وضع العناصر بشكل واضح أثناء استخدام Grid Lanes. هنا، يتم وضع الرأس دائمًا في العمود الأخير، بغض النظر عن عدد الأعمدة الموجودة.
main { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));}header { grid-column: -3 / -1;}تغيير الاتجاهات
نعم، يمكن أن تذهب الممرات في أي اتجاه! جميع الأمثلة المذكورة أعلاه تؤدي إلى إنشاء شكل “شلال”، حيث يتم وضع المحتوى في أعمدة. لكن يمكن استخدام Grid Lanes لإنشاء تخطيط في الاتجاه الآخر، في شكل تخطيط “الطوب”.
يقوم المتصفح تلقائيًا بإنشاء تخطيط شلال عندما تقوم بتحديد الأعمدة grid-template-columns، مثله:
.container { display: grid-lanes; grid-template-columns: 1fr 1fr 1fr 1fr;}إذا كنت تريد تخطيطًا من الطوب في الاتجاه الآخر، فبدلاً من ذلك حدد الصفوف به grid-template-rows:
.container { display: grid-lanes; grid-template-rows: 1fr 1fr 1fr;}يعمل هذا تلقائيًا بفضل الإعداد الافتراضي الجديد لـ”https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-auto-flow”>grid-auto-flow، ال normal قيمة. إنه يحدد ما إذا كان سيتم إنشاء أعمدة أو صفوف بناءً على ما إذا كنت قد حددت الممرات باستخدامها grid-template-columns أو grid-template-rows.
لا تزال مجموعة عمل CSS تناقش الخاصية التي ستتحكم بشكل واضح في اتجاه التدفق، وما هو بناء الجملة الخاص بها. يدور النقاش حول إمكانية إعادة الاستخدام grid-auto-flow أو إنشاء خصائص جديدة مثل grid-lanes-direction. إذا كنت مهتمًا بالقراءة عن الخيارات التي يتم النظر فيها أو تتوافق مع أفكارك، فاطلع على”https://github.com/w3c/csswg-drafts/issues/12803#issuecomment-3643945412″> هذه المناقشة.
ومع ذلك، منذ ذلك الحين normal ستكون القيمة الأولية في كلتا الحالتين، فلا يتعين عليك انتظار هذا القرار لتتعلم Grid Lanes. عند تحديد اتجاه واحد فقط – grid-template-rows أو grid-template-columns – سوف يعمل فقط ™. (إذا لم يحدث ذلك، تحقق مما إذا كان grid-auto-flow تم تعيينه على قيمة متعارضة. أنت تستطيع”https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/unset”>unset إذا لزم الأمر.)
حساسية التنسيب
“التسامح” هو مفهوم جديد تم إنشاؤه لـ Grid Lanes. فهو يتيح لك ضبط مدى دقة خوارزمية التخطيط عند تحديد مكان وضع العناصر.
انظر إلى الرسم التالي. لاحظ أن السيارة 4 أقصر قليلًا من السيارة 1. عندما يكون “التسامح” صفرًا، ينتهي الأمر بالسيارة 6 في أقصى اليمين، بينما تكون السيارة 7 على اليسار. تنتهي السيارة رقم 6 خلف السيارة رقم 4 على اليمين لأن ذلك يجعلها أقرب قليلاً “على الطريق” (أقرب إلى الجزء العلوي من حاوية الشبكة). تأخذ السيارة رقم 7 بعد ذلك الفتحة التالية الأقرب إلى الأعلى، وينتهي بها الأمر خلف السيارة رقم 1 على اليسار. النتيجة النهائية؟ يتم ترتيب المجموعة الأفقية الأولى للمحتوى 1، 2، 3، 4، والتالية هي 7، 5، 6.
لكن الفرق في الطول بين السيارة 1 والسيارة 4 صغير. السيارة رقم 6 ليست أقرب إلى أعلى الصفحة بشكل ملموس. ومن المحتمل أن يكون وجود العنصر 6 على اليمين، مع العنصر 7 على اليسار تجربة غير متوقعة – خاصة بالنسبة للمستخدمين الذين يتنقلون عبر المحتوى، أو عندما يتم تصنيف ترتيب المحتوى بطريقة ما.
هذه الاختلافات الصغيرة في الحجم لا تهم بأي معنى عملي. بدلاً من ذلك، يجب أن يأخذ المتصفح في الاعتبار أحجام العناصر مثل السيارة 1 والسيارة 4 لتكون بمثابة رابط. لهذا السبب الافتراضي ل item-tolerance يكون 1em — وهو ما يعني أن الاختلافات في طول المحتوى الأكبر من 1 em فقط هي التي ستكون ذات أهمية عند معرفة المكان الذي سينتقل إليه العنصر التالي.
إذا كنت ترغب في تقليل التبديل العشوائي لتخطيط العناصر، فيمكنك تعيين قيمة أعلى لـ item-tolerance. في الرسم البياني التالي، تم ضبط التسامح على نصف سيارة، مما يجعل السيارات تصطف بشكل أساسي من اليسار إلى اليمين وتتحرك فقط إلى حارة أخرى لتجنب سيارة الليموزين الطويلة جدًا. الآن، المجموعات الأفقية للمحتوى هي 1، 2، 3، 4، و5، 6، 7.
فكر في التسامح باعتباره مدى الهدوء الذي تريد أن يكون عليه سائقو السيارات. هل سيغيرون المسارات للحصول على بضع بوصات فقط للأمام؟ أم أنهم سيتحركون فقط إذا كان هناك مساحة كبيرة في المسار الآخر؟ مقدار المساحة التي تريد منهم أن يهتموا بها هو المبلغ الذي حددته item-tolerance.
تذكر أن الأشخاص الذين يتنقلون عبر الصفحة سيرون كل عنصر مميزًا عند التركيز عليه، وقد يختبرون الصفحة من خلال قارئ الشاشة. يمكن أن يؤدي تعيين تسامح العنصر على مستوى عالٍ جدًا إلى إنشاء تجربة غير ملائمة للقفز لأعلى ولأسفل في التخطيط. يمكن أن يؤدي التسامح المنخفض للغاية مع العناصر إلى التنقل ذهابًا وإيابًا عبر التخطيط أكثر من اللازم. يُعدِّل item-tolerance إلى شيء مناسب لأحجام وأحجام المحتوى الخاص بك.
حاليا، يتم تسمية هذه الخاصية item-tolerance في”https://www.w3.org/TR/css-grid-3/#placement-tolerance”> المواصفات وفي Safari Technology Preview 234. ومع ذلك، لا تزال هناك فرصة لتغيير هذا الاسم، ربما إلى شيء مثل flow-tolerance أو pack-tolerance. إذا كان لديك تفضيل، أو أفكار لاسم أفضل، يمكنك ذلك”https://github.com/w3c/csswg-drafts/issues/10884#issuecomment-3658059682″> تتناغم هنا. ترقب التحديثات المتعلقة بالاسم النهائي قبل استخدام هذه الخاصية على مواقع الإنتاج.
جربه
جرب ممرات الشبكة في Safari Technology Preview 234! جميع العروض التوضيحية في”https://webkit.org/demos/grid3/”>webkit.org/demos/grid3 تم تحديثها باستخدام البنية الجديدة، بما في ذلك حالات الاستخدام الأخرى لـ Grid Lanes. انها ليست فقط للصور! على سبيل المثال، فجأة يصبح من السهل تخطيط تذييل القائمة الضخمة المليء بالروابط.
.container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch)); column-gap: 4lh;}ما هي الخطوة التالية؟
هناك بعض القرارات الأخيرة التي يتعين على مجموعة عمل CSS اتخاذها. لكن بشكل عام، الميزة كما هو موضح في هذه المقالة جاهزة للاستخدام. حان الوقت لتجربتها. وأخيرًا أصبح من الآمن الالتزام ببناء الجملة الأساسي في الذاكرة!
نحن نحب أن تقوم ببعض العروض التوضيحية! اعرض حالات الاستخدام الجديدة التي يمكنك تخيلها. وأخبرنا عن أي أخطاء أو تحسينات محتملة تكتشفها. بينغ جين سيمونز على”https://bsky.app/profile/jensimmons.bsky.social”>بلوسكي أو”https://front-end.social/@jensimmons”> المستودون مع الروابط والتعليقات والأفكار.
يعمل فريقنا على هذا الأمر منذ منتصف عام 2022، حيث يقوم بالتنفيذ في WebKit وكتابة معيار الويب. لا يمكننا الانتظار لنرى ماذا ستفعل به.