إدريس الدويري 
تنسيق Masonry (المعروف أيضًا باسم “تنسيق Pinterest”) هو نظام تصميم شائع، وأحد أنماط التنسيق المفضلة لدي أصبح ممكنًا أخيرًا في CSS فقط باستخدام القيمة الجديدة display: grid-lanes (التي لم يتم دعمها بعد).
هذا يجعل من السهل إنشاء هذه التصميمات الجميلة دون المساس بإمكانية الوصول أو كسر ترتيب القراءة المنطقي للعناصر.
.masonry-container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
}ما هو تنسيق Masonry؟
اسم “Masonry” مستوحى من طريقة البناء التقليدية التي تتضمن تركيب أحجار بأحجام مختلفة معًا لتشكيل جدار صلب.
تعمل ميزة grid-lanes الجديدة كهجين بين Flexbox و Grid. فهي تعمل عن طريق تحديد مسارات صارمة تتدفق فيها العناصر بحرية إلى المساحة المتاحة التالية، مما يلغي الفجوات العمودية غير المتساوية التي تميز الشبكات القياسية.
الحياة قبل grid-lanes كانت تتطلب استخدام حيل CSS، مثل تنسيق متعدد الأعمدة، أو JavaScript مخصص لإجراء حسابات ديناميكية، أو استخدام مكتبة مكتوبة مسبقًا مثل masonry-layout.
هل تتدفق grid-lanes في اتجاه واحد فقط؟
لا. بما أن grid-lanes تعتمد على مفاهيم Grid الأساسية، يحدد المتصفح تلقائيًا اتجاه التدفق بناءً على تعريفات المسار الخاصة بك. إذا استخدمت grid-template-columns، تتدفق العناصر عموديًا؛ وإذا استخدمت grid-template-rows، فإنها تتدفق أفقيًا.
يمكنك أيضًا التحكم بشكل صريح في منطق التموضع (لم يتم تأكيد كيفية القيام بذلك بعد).
حالات استخدام تنسيق Masonry
بينما يعد معرض الصور بأسلوب “Pinterest” المثال الأكثر شهرة، فإن Masonry مفيد في أي مكان يختلف فيه ارتفاع المحتوى. إنه ينشئ مظهرًا كثيفًا ومصقولًا لـ القوائم الضخمة (mega menus)، و روابط التذييل متعددة الأعمدة، و قوائم منشورات المدونة، حيث قد تؤدي أطوال العناوين أو الملخصات المختلفة إلى إنشاء فجوات غير مرغوب فيها.
قد تشمل حالات الاستخدام الأخرى:
- ودجات لوحة التحكم
- الشهادات (Testimonials)
- كتالوج المنتجات
