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

Patrick Brosset

Alison Maher

تاريخ النشر: 23 يوليو 2025

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

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

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

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

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

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

ما هو تصميم "البناء بالحجارة"؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

حالة CSS masonry

يعمل فريق CSS Working Group على إعداد مسودة بشأن تصميم البناء بالطوب في مواصفات 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 بدلاً من استخدام إحدى سمتَي نموذج الشبكة.

منذ نشر المشاركات من قِبل فريقي 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.