قبل بضعة أسابيع ، تحدثت في
Frontend NE في نيوكاسل وشرحت في معظمها الميزات التي ستكون في CSS Grid Subgrid من Grid Level 2. بعد عدم تنفيذ هذه الخاصية (في المتصفحات) ، قمت بنمذجة مجموعة من العروض باستخدام DevTools ، لذلك العروض.
في الطريق إلى San Francisco on Smashing Conf ، حيث أجريت ورشة عمل CSS Layout ، تم إعطائي إمكانية الوصول إلى الإصدار التجريبي من Firefox Nightly ، والذي كان له تنفيذ مبكر لهذه الخاصية.
هذا يعني أنني بحاجة إلى إعادة بعض الشرائح لأدائي في شهر مايو ، سيتم استخدام لقطات حقيقية هناك.
لقد نشرت بضع لقطات على Twitter وسأقوم بنشر جميع الأمثلة الخاصة بي في
Grid by Example ، بمجرد أن تعمل خاصية CSS Grid Subgrid مع العلم في مجموعة Firefox Nigtly الرئيسية. ومع ذلك ، لكل من لديه أشياء أكثر أهمية من مشاهدة Twitter خلال عطلة نهاية الأسبوع ، إليك بعض لقطات الشاشة. تحتوي على روابط
لأمثلة My CodePen حتى تتمكن من رؤية الكود الخاص بعناصر Subgrid (subgrid). لقد أبرزت الشبكة (الشبكة) والشبكة الفرعية (الشبكة الفرعية) في FireTox DevTools لمساعدتك في معرفة ما تحتاج إلى النظر إليه.
شبكة للأعمدة والصفوف
في هذه الحالة ، يكون النطاق الفرعي في أعمدة وصفوف العنصر الأصل. هذا يعني أنه في منطقة الشبكة الفرعية لا توجد شبكة مخفية ، لأن كلا الحجمين مرتبطان بالمسارات المتاحة للوالد.
CodePen - شبكة للأعمدة والصفوفشبكة العمود فقط
في هذه الحالة ، استخدمت مجموعة فرعية للأعمدة. هذا يعني أنه يمكنني استخدام مسارات شبكة ضمنية لإضافة العديد من الخطوط حسب الحاجة للعناصر. تستخدم الصفوف حجمها الخاص كشبكة متداخلة بدون شبكة فرعية.
CodePen - شبكة العمود فقطالشبكة الفرعية فقط
في هذه الحالة ، صنعت الصفوف الفرعية وحددت الأعمدة ، كالعادة في وحدات fr.
كما ترى ، لا تتطابق مسارات الأعمدة مع المسارات الأصل ، لأنها تستخدم تعريف الشبكة الخاص بها.
CodePen - Subgrid فقط للسلاسليسعدني جدًا أن أرى تقدمًا في تطوير CSS Grid Subgrid ، فضلاً عن فرصة التحدث عن ذلك في الندوات والتقارير الخاصة بي.
يمكن العثور على مزيد من المعلومات حول Subgrid على هذه الروابط: