لبنة تلو الأخرى: ساعدنا في إنشاء CSS Masonry

Patrick Brosset

Alison Maher

تاريخ النشر: 23 يوليو 2025، تاريخ آخر تعديل: 13 فبراير 2026

يسرّ فريقي Microsoft Edge وGoogle Chrome الإعلان عن أنّ ميزة CSS masonry جاهزة للاختبار المبكر من قِبل المطوّرين في الإصدار 140 من Chrome وEdge.

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

اختبِر CSS Masonry في Chromium اليوم

لاختبار CSS Masonry اليوم، اتّبِع الخطوات التالية:

1. استخدِم الإصدار 140 من Chrome أو Edge أو إصدارًا أحدث (أو متصفّحًا آخر مستندًا إلى Chromium بإصدار متوافق).
2. انتقِل إلى about:flags في علامة تبويب جديدة.
3. ابحث عن "CSS Masonry Layout".
4. فعِّل العلامة.
5. أعِد تشغيل المتصفِّح.

بعد تفعيل الميزة، يمكنك الاطّلاع على طريقة عملها من خلال الاطّلاع على عروض Microsoft Edge التوضيحية (يمكنك الاطّلاع على الرمز المصدر للعروض التوضيحية) أو مواصلة القراءة لمعرفة المزيد عن الميزة وبنية الجملة المتاحة.

ما هو التنسيق المتجانب؟

‫CSS masonry هو وضع تنسيق يتيح لك إنشاء ترتيب للعناصر يشبه الطوب، بطريقة لا يمكن تحقيقها بسهولة باستخدام شبكة CSS أو نموذج flexbox أو التنسيق المتعدّد الأعمدة.

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

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

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

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

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

يمكن أن يؤدي سلوك الموضع التلقائي هذا إلى نتائج مثيرة للاهتمام، والتي حاول مصممو الويب تحقيقها لفترة طويلة. على سبيل المثال، يمكنك الاطّلاع على النسخة التجريبية من معرض صور مدينة نيويورك، والتي توضّح كيفية عرض الصور بطريقة مدمجة على مستوى أعمدة متعددة، مع السماح لبعض العناصر (العنوان في هذا المثال) بالامتداد على مستوى أعمدة متعددة:

في ما يلي بعض الأمثلة الأخرى على ما يمكن استخدام التجانب من أجله.

تخطيط مدونة، يعرض الصورة المصغرة لكل منشور ووصفه.

موقع إخباري تظهر فيه المقالات في أعمدة، وبعض المقالات أوسع من غيرها، وتمتد الصور الرئيسية على كامل عرض الصفحة

مجموعة من الصور بأحجام أعمدة مختلفة، وتمتد بعض الصور على أعمدة متعددة.

الحلول البديلة والقيود المفروضة عليها

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

• أداء أضعف: إنّ الاعتماد على مكتبات JavaScript أو الرموز البرمجية المخصّصة لمحاكاة تخطيط CSS القرميدي يؤدي إلى تراجع في الأداء، ما قد يؤثر سلبًا في تجربة المستخدم.
• تعقيد الرمز البرمجي بشكل أكبر:
  • من الصعب ضمان الموضع الصحيح للعناصر وتوزيع المساحة ضمن شبكة CSS أو flexbox أو الأعمدة المتعددة لمحاكاة تنسيق CSS masonry.
  • يمكن أن يؤدي التعامل مع ميزات محددة مثل العناصر التي تمتد لأكثر من عمود أو صف، أو الترتيب المخصص للعناصر، أو التعديل على إطار العرض أيضًا إلى التعقيد والقيود.
• عبء صيانة أكبر: يصعب إجراء الصيانة لرموز CSS أو JavaScript المخصّصة والمعقّدة.

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

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

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

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

النقطة التي يجب تذكّرها هنا ليست أنّ الشبكة أو flexbox أو الأعمدة المتعددة هي تنسيقات أسوأ من التجانب. إنّها أنواع رائعة من التنسيقات التي لها العديد من حالات الاستخدام. النقطة هي: إذا كنت تريد تخطيطًا حجريًا، فإن تخطيط CSS الحجري هو ما سيمنحه لك.

حالة CSS masonry

تعمل مجموعة CSS Working Group على صياغة تخطيط Masonry في مواصفات CSS Grid Level 3. لا تزال المواصفات قيد الإنشاء وتتضمّن مؤقتًا صيغتين مختلفتين مقترحتين. يستخدم الخيار الأول كلمة رئيسية جديدة للسمة display، بينما يتم دمج الخيار الثاني مباشرةً في تنسيق شبكة CSS.

استخدام ميزة "display: masonry"

تقدّم هذه الصيغة تنسيق CSS Masonry كنوع display خاص به. يمكنك الاطّلاع على مزيد من التفاصيل حول هذا النهج والدافع وراءه في منشور المدوّنة مطلوب تقديم ملاحظات: كيف يجب أن نعرّف CSS masonry؟ من فريق Google Chrome، وكذلك في القسم المتبقي من هذا المنشور. ويستند النموذج الأوّلي الحالي في Chromium إلى هذا الاقتراح.

display: grid; grid-template-*: masonry;

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

يمكنك الاطّلاع على مزيد من التفاصيل حول هذا الاقتراح والدافع وراءه في منشور WebKit مساعدتنا في اختيار البنية النهائية لـ Masonry في CSS.

يُرجى العِلم أنّ السمة item-pack والكلمة الرئيسية collapse هما بديلان لهذا الاقتراح، وسيؤديان إلى تفعيل تنسيق CSS Masonry بدلاً من استخدام إحدى سمتَي نماذج الشبكة.

منذ نشر المنشورات من قِبل فريقي Chrome وWebKit، واصلت مجموعة CSSWG المناقشات حول البنية العامة للمضي قدمًا. يمكن أن تساعدنا ملاحظاتك في توجيه المزيد من التطوير داخل هذه المنتديات.

لمزيد من التفاصيل حول الحالة الحالية للمناقشات، يمكنك الاطّلاع على المشكلة 11593 التي توضّح المجموعة الحالية من مواضيع مناقشة بنية Masonry، والمشكلة 11243 للحصول على ملخّص للنقاش حول البنية حتى الآن.

إنشاء تنسيق CSS متراصّ خاص بك

لنستمتع ببعض المرح وننشئ تخطيطًا حجريًا باستخدام CSS.

على الرغم من أنّ بنية CSS Masonry لا تزال قيد المناقشة، يمكن اختبار تنفيذنا للميزة في Chromium اليوم من خلال تفعيل علامة CSS Masonry Layout كما هو موضّح في اختبار CSS Masonry اليوم. توضّح الأمثلة التالية الميزات المتوفّرة في الإصدار التجريبي للمطوّرين.

إنشاء حاوية شبكة غير منتظمة

لإنشاء أول حاوية قرميدية مستندة إلى الأعمدة، استخدِم display:masonry وحدِّد أحجام الأعمدة باستخدام grid-template-columns. بما أنّ القيمة التلقائية لسمة masonry-direction هي column، يكون ضبط هذه السمة اختياريًا.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

لإنشاء حاوية شبكة غير منتظمة مستندة إلى الصفوف، استخدِم display:masonry وحدِّد أحجام الصفوف باستخدام grid-template-rows، ثم اضبط masonry-direction:row.

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

كما لاحظت، تختلف هذه الصيغة قليلاً عن الاقتراح الأصلي من Google. بغض النظر عن المشغّل المستخدَم في CSS Masonry، قرّرت مجموعة عمل CSS إعادة استخدام خصائص تحديد حجم نموذج الشبكة ووضعه ضمن تنسيق CSS Masonry.

على الرغم من أنّ ذلك يتيح إعادة استخدام السمات بشكل أكبر بين أنواع التنسيقات، قد يكون ذلك مربكًا، ويسرّنا تلقّي ملاحظاتك حول هذا الموضوع. قد نستكشف إنشاء أسماء مستعارة أكثر عمومية لسمات مثل grid-template-columns وgrid-template-rows، مثل template-columns أو template-rows، والتي يمكن استخدامها لكل من الشبكة والبناء.

استخدام حجم المسار التلقائي

مع نوع العرض الجديد، تتوفر فرصة لإعادة التفكير في الإعدادات التلقائية للخصائص.

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

يضيف التنفيذ في Chromium التعريف الجديد المقترَح لـ none، والذي سيحلّ محلّ حجم المسار التلقائي في CSS masonry. حجم المسار التلقائي الجديد هذا هو قيمة repeat(auto-fill, auto). تنشئ هذه القيمة تخطيطًا جميلاً بدون الحاجة إلى تحديد أحجام المسارات على الإطلاق:

.masonry {
  display: masonry;
  gap: 10px;
}

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

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

جرِّب استخدام السمة المختصرة masonry

كما ذكرنا سابقًا، يعتمد التنفيذ الحالي في Chromium على سمات grid-template-* لتحديد مسار البناء في التنسيق. ومع ذلك، نظرًا لأنّ التجانب يحتوي على سمة واحدة فقط، فقد نفّذنا أيضًا السمة المختصرة masonry، والتي يمكنك استخدامها لتحديد كل من اتجاه التجانب وتعريف المسار دفعة واحدة، بدون السمة المربكة التي تبدأ بـ grid-.

على سبيل المثال، سينشئ مقتطفا الرمز التاليان حاويات CSS متكافئة بتصميم شبكي.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

لا تزال الصيغة المختصرة masonry قيد المناقشة من قِبل مجموعة عمل CSS. ننصحك بتجربتها اليوم وإعلامنا برأيك.

استخدام أحجام المسارات المخصصة

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

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

في هذا المثال، نحدّد أول مسارَين بحجم 3rem، يليهما عدد متغيّر من المسارات بحجم 5rem، ثم مسار واحد بحجم 12rem.

تغطية مسارات متعددة

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

على سبيل المثال:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

يمكنك أيضًا استخدام هذه الإمكانية لتوسيع مسارات متعددة لجعل عناصر معينة بطول الحاوية بالكامل:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

هذا ما يستخدمه الموقع الإخباري التجريبي لعرض إعلان الاشتراك ضمن المقالات.

ضبط دقيق لموضع عنصر البناء

في CSS Masonry، يتم وضع العناصر في العمود أو الصف الذي يحتوي على أقصر موضع تشغيل.

لنفترض أنّ لدينا حاوية من عمودَين بتصميم شبكي. إذا كانت الحاوية تحتوي على عنصر بارتفاع 110 بكسل في العمود الأول وعنصر بارتفاع 100 بكسل في العمود الثاني، سيتم وضع عنصر ثالث في العمود الثاني، حيث سيكون أقرب بمقدار 10 بكسل من بداية اتجاه التجانب.

إذا كان الفرق بمقدار 10 بكسل في موضع التشغيل صغيرًا بما يكفي لحالتك، وتفضّل وضع العنصر الثالث في العمود الأول بدلاً من ذلك، لمطابقة ترتيب المصدر بشكل أفضل، استخدِم السمة item-tolerance.

تتحكّم السمة الجديدة item-tolerance في حساسية موضع العنصر.

في المثال السابق، يمكنك تطبيق item-tolerance: 10px; على الحاوية لتخصيص التباين في موضع العنصر:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

يُرجى العِلم أنّ مسودة المواصفات تشير إلى هذه السمة باسم item-slack. قرّرت مجموعة عمل CSS مؤخرًا استخدام الاسم item-tolerance بدلاً من ذلك، وسيتم تعديل المواصفات قريبًا.

أماكن أخرى متاحة

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

طلب الملاحظات

نتطلّع إلى استكشافك لتخطيط CSS Masonry، وإطلاق العنان لإبداعك، واكتشاف الإمكانات الجديدة التي يمكن أن تساعدك في الاستفادة منها. للبدء، يمكنك الاطّلاع على العروض التوضيحية والرمز المصدري الخاص بها والبدء بإنشاء أمثلة خاصة بك في Chromium (تذكَّر تفعيل العلامة أولاً).

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

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

لا يزال تنفيذ CSS masonry جاريًا في Chromium. إذا اختبرتها، يُرجى العِلم أنّنا ما زلنا نعمل على تطويرها وقد تواجه حالات لا تعمل فيها على النحو المتوقّع. تشمل بعض القيود الحالية التعبئة الكثيفة، والموضع العكسي، ودعم الشبكة الفرعية، ودعم خارج التدفق، ودعم الأساس، ودعم أدوات مطوري البرامج، ودعم التجزئة، ودعم زخرفة الفجوات، من بين أمور أخرى.

إذا عثرت على خطأ أثناء اختبار الميزة، يُرجى مشاركة ملاحظاتك من خلال فتح خطأ جديد في Chromium.