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

Patrick Brosset

Alison Maher

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

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

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

تجربة CSS Masonry في Chromium اليوم

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

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

إدخال "التصميم المتجاوب" في صفحة "التجارب"

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

ما هو التصميم المتراص؟

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

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

العناصر المرتبة في تنسيقات البناء الحجري

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

عرض توضيحي باستخدام مركبات تصطف في مسارات لتوضيح التصميم

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

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

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

الصورة التي تتضمّن مركبات، هذه المرة مركبات كبيرة تمتد على عمودَين

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

في ما يلي بعض الأمثلة الأخرى على استخدامات التصميم المتراص.

تنسيق مدوّنة يعرض الصورة المصغّرة والوصف لكل مشاركة

موقع إخباري يستخدم تصميمًا شبكيًا لبطاقات المقالات — يمكنك الاطّلاع على العرض التوضيحي للمدونة هنا.

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

موقع إخباري تمتد فيه بعض المقالات على عدة أعمدة — يمكنك الاطّلاع على العرض التوضيحي لموقع الأخبار الإلكتروني هنا.

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

تنسيق البناء بالطوب لموقع إلكتروني خاص بالتصوير — يمكنك الاطّلاع على العرض التوضيحي للطبيعة هنا.

الحلول البديلة وقيودها

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

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

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

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

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

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

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

حالة CSS masonry

يعمل فريق CSS Working Group على إعداد مسودة لميزة "البناء بالطوب" في مواصفات مستوى 3 من شبكة CSS. لا يزال هذا المستند قيد الإنشاء، ويتضمّن مؤقتًا صيغتين مختلفتين مقترحتين. يستخدم المثال الأول كلمة رئيسية جديدة للسمة 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 بدلاً من استخدام إحدى سمتَي نموذج الشبكة.

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

للحصول على مزيد من التفاصيل حول الحالة الحالية للمناقشات، يُرجى الاطّلاع على المشكلة رقم 11593 التي توضّح مجموعة مواضيع المناقشة الحالية حول بناء الجملة الخاص بالتصميم المتراص، والمشكلة رقم 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 {
 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، مثل grid-row أو grid-column أو grid-area أو grid-template-areas أو order. استفِد من إمكانات شبكة CSS الكاملة عند إنشاء تخطيط البناء بالحجارة.

دعوة لتقديم الملاحظات

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

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

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

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

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