تاريخ النشر: 19 سبتمبر 2024، تاريخ آخر تعديل: 13 فبراير 2026
جمعت "مجموعة عمل CSS" اقتراحَي "البناء بالطوب" في CSS في مواصفات مسودّة واحدة. وتأمل المجموعة أن يسهّل ذلك مقارنة الخيارَين واتخاذ قرار نهائي. لا يزال فريق Chrome يرى أنّ توفير بنية منفصلة للترتيب على شكل جدار هو أفضل طريقة للمضي قدمًا. على الرغم من أنّنا حللنا أكبر مشكلة أداء ذكرناها في منشورنا السابق، لا تزال هناك مخاوف بشأن بناء الجملة والقيم الأولية ومدى سهولة تعلّم استخدام إصدار مدمج مع الشبكة.
لاختبار افتراضاتنا، عملنا على بعض الأمثلة لتوضيح طريقة عمل التنسيق الشبكي مع كل إصدار. يُرجى الاطّلاع على الأمثلة الواردة في هذه المشاركة ومشاركة ملاحظاتك معنا لنتمكّن من اتّخاذ قرار بشأن هذه الميزة والمضي قدمًا في طرحها.
لا تغطي هذه المشاركة جميع حالات الاستخدام المحتملة، ولكن من الواضح أنّ فصل التصميم المتراص عن تصميم الشبكة لن يؤدي إلى نقص في وظائف الميزة. في الواقع، قد يكون العكس صحيحًا. كما سنوضّح في هذه المشاركة، يتيح الإصدار display: masonry فرصًا جديدة ويقدّم بنية أبسط.
بالإضافة إلى ذلك، عبّر العديد من المطوّرين عن مخاوفهم بشأن إمكانية إعادة ترتيب العناصر باستخدام تصميم البناء الحر، ما قد يؤدي إلى حدوث مشاكل في تسهيل الاستخدام. ويتم أيضًا معالجة هذا الأمر في كلا إصدارَي الصيغة من خلال السمة reading-flow المقترَحة.
تنسيق أساسي من الطوب
هذا هو التصميم الذي يتصوّره معظم الأشخاص عند التفكير في التصميم المتجانب. تظهر العناصر في صفوف، وبعد وضع الصف الأول، تنتقل العناصر اللاحقة إلى المساحة التي خلّفتها العناصر الأقصر.
باستخدام display: masonry
لإنشاء تخطيط بنّاء، استخدِم القيمة masonry للسمة display. يؤدي ذلك إلى إنشاء تخطيط بنّاء مع مسارات أعمدة تحدّدها أنت (أو يحدّدها المحتوى) وبنّاء في المحور الآخر. يتم عرض العنصر الأول في بداية الحظر وبداية السطر (وبالتالي في أعلى اليمين باللغة العربية)، ويتم ترتيب العناصر في اتجاه السطر.
لتحديد المسارات، استخدِم masonry-template-tracks مع قيم قائمة المسارات كما هو مستخدَم
في تخطيط شبكة CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
باستخدام display: grid
لإنشاء تخطيط بنّاء، عليك أولاً إنشاء تخطيط شبكي باستخدام القيمة grid
للسمة display. حدِّد الأعمدة باستخدام السمة grid-template-columns، ثمّ امنح grid-template-rows القيمة masonry.
سيؤدي ذلك إلى إنشاء تنسيق كما تتوقّع مع عناصر شبكة موضوعة تلقائيًا، ولكن تستخدم العناصر في كل صف تنسيقًا حجريًا وسيتم إعادة ترتيبها لتشغل المساحة المتبقية من العناصر الأصغر في الصف السابق.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
نقاط يجب مراعاتها عند الاختيار بين الخيارَين
يتمثّل الاختلاف الملحوظ بين هاتين الطريقتين في أنّك باستخدام display: masonry
، ستحصل على تصميم بنمط البناء الحرّ حتى إذا لم تحدّد أي مسارات باستخدام
masonry-template-tracks. لذلك، قد يكون display: masonry هو كل ما تحتاجه.
ويرجع ذلك إلى أنّ القيمة الأولية لـ masonry-template-tracks هي repeat(auto-areas, auto). ينشئ التصميم أكبر عدد ممكن من المقاطع ذات الحجم التلقائي التي تتناسب مع الحاوية.
تدفق معكوس مع تصميم البناء
يتضمّن المواصفات طرقًا لتغيير اتجاه تدفق البناء. على سبيل المثال، يمكنك تغيير ترتيب العرض من نهاية الفقرة إلى بدايتها.
باستخدام display: masonry
أنشئ تنسيقًا من نوع "البناء بالطوب" باستخدام display: masonry، ثم استخدِم masonry-direction
مع القيمة column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
باستخدام display: grid
أنشئ تصميمًا شبكيًا باستخدام display: grid وgrid-template-rows: masonry.
بعد ذلك، استخدِم السمة grid-auto-flow مع القيمة الجديدة row-reverse لجعل العناصر تظهر من نهاية الحزمة في حاوية الشبكة.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
نقاط يجب مراعاتها عند الاختيار بين الخيارَين
يبدو الإصدار display: masonry مشابهًا جدًا لطريقة عمل flexbox. يمكنك تغيير اتجاه تدفّق الأعمدة باستخدام السمة masonry-direction مع القيمة column-reverse.
يستخدم إصدار شبكة CSS grid-auto-flow. وفقًا للتعريف الحالي، سيؤدي استخدام grid-auto-flow: row-reverse وgrid-auto-flow: column-reverse إلى النتيجة نفسها. قد يكون ذلك مربكًا، إذ قد تتوقّع أن تؤدي هذه الرموز وظيفة مختلفة.
لحجارة البناء في الصفوف
يمكنك أيضًا تغيير الاتجاه لتحديد الصفوف.
باستخدام display: masonry
أنشئ تخطيطًا من الطوب باستخدام display: masonry، ثم اضبط قيمة masonry-direction على row. ما لم تكن تريد أن تحتوي الصفوف على حجم حظر معيّن، لن تحتاج إلى تحديد أي حجم للمسار لأنّ القيمة التلقائية هي auto، وبالتالي سيتم تحديد حجم المسارات حسب المحتوى الذي تتضمّنه.
.masonry {
display: masonry;
masonry-direction: row;
}
باستخدام display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
نقاط يجب مراعاتها عند الاختيار بين الخيارَين
كما هو الحال مع التدفق المعكوس، يعني تغيير إصدار display: masonry من الأعمدة إلى الصفوف تغيير قيمة masonry-direction. في نسخة الشبكة، عليك تبديل قيمتَي السمتَين grid-template-columns وgrid-template-rows. أو إذا كنت تستخدم الاختصار، غيِّر ترتيب البنية.
في كلا المثالين على عملية التبديل، تبدو display: masonry أكثر سهولة في الاستخدام. هناك سمة واحدة تتحكّم في التدفق
masonry-direction، وتتضمّن إحدى القيم التالية:
rowcolumnrow-reversecolumn-reverse
بعد ذلك، أضِف أي معلومات عن الحجم مطلوبة إلى masonry-template-tracks،
بافتراض أنّ القيمة التلقائية التلقائية ليست ما تحتاج إليه.
باستخدام الشبكة، لتحديد الاتجاه المعاكس، عليك استخدام السمة grid-auto-flow، ولتحديد صف البناء الحر، عليك تبديل قيمة السمتَين grid-template-*. ولا يمكن أيضًا في بنية الشبكة الحالية ترك قيمة محور الشبكة غير محدّدة. عليك دائمًا تحديد سمات grid-template-* على المحور الذي لا يحتوي على القيمة masonry.
ترتيب العناصر
في كلا الإصدارَين، يمكنك تحديد موضع العناصر بشكل صريح باستخدام الموضع المستند إلى الأسطر الذي تعرفه من تنسيق الشبكة. في كلا الإصدارَين، يمكنك فقط تحديد موضع العناصر في محور الشبكة، وهو المحور الذي يتضمّن المسارات المحدّدة مسبقًا، ولا يمكنك تحديد موضع العناصر على المحور الذي ينفّذ التنسيق المتراص.
باستخدام display: masonry
يحدّد رمز CSS التالي تخطيطًا حجريًا بأربعة أعمدة. وبالتالي، فإنّ محور الشبكة هو الأعمدة. يتم وضع العنصر الذي يحمل الفئة a من خط العمود الأول إلى خط العمود الثالث، ويمتد على مسارين باستخدام خصائص masonry-track-* الجديدة. ويمكن تعريف ذلك أيضًا على أنّه اختصار لـ
masonry-track: 1 / 3;.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
باستخدام display: grid
يحدّد رمز CSS التالي تخطيطًا حجريًا بأربعة أعمدة. وبالتالي، فإنّ محور الشبكة هو الأعمدة. يتم وضع العنصر الذي يحمل الفئة a من خط العمود الأول إلى خط العمود الثالث، ويمتد على مسارين باستخدام خصائص grid-column-*. يمكن أيضًا تعريف ذلك على أنّه اختصار لـ grid-column: 1 / 3;.
إذا كان محور الشبكة هو الأعمدة، سيتم تجاهل السمات grid-row-*، وإذا كان محور الشبكة هو الصفوف، سيتم تجاهل السمات grid-columns-*.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
يمكنك استخدام أسطر مُسمّاة مع كلتا الصيغتين. تعرض الأمثلة التالية شبكة
تتضمّن سطرَي أعمدة باسم a.
باستخدام display: masonry
يتم تحديد الأسطر المسماة في قيمة قائمة الأغاني ضمن
masonry-template-tracks. يمكن وضع العنصر بعد أي سطر باسم a.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
باستخدام display: grid
يتم تحديد الأسطر المسماة في قيمة قائمة الأغاني ضمن
grid-template-columns. يتم وضع العنصر بعد السطر الأول المسمّى a. إذا تم تحديد السمة grid-row، سيتم تجاهلها.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
يمكنك أيضًا استخدام مناطق مُسمّاة في كلتا الصيغتين. تعرض الأمثلة التالية شبكة تتضمّن ثلاثة مسارات باسم "a" و"b" و "c".
باستخدام display: masonry
تتم تسمية المقاطع الصوتية بقيمة masonry-template-areas. بما أنّه لم يتم تحديد أحجام المسارات، سيتم ضبط جميع المسارات الثلاثة على الحجم auto تلقائيًا. يتم وضع العنصر في المسار "a".
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
ويعمل هذا الإجراء بالطريقة نفسها سواء كنت تحدّد الصفوف أو الأعمدة، والفرق الوحيد هو السمة masonry-direction.
باستخدام display: grid
بالنسبة إلى الأعمدة، تكون البنية متطابقة بشكل أساسي. وبالمثل، بما أنّه لم يتم تحديد أحجام المسارات، سيتم ضبط جميع المسارات الثلاثة تلقائيًا على الحجم auto، ولكن سيظل عليك تحديد أنّ المحور الآخر هو "البناء بالطوب":
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
بالنسبة إلى الصفوف، يجب كتابة القيمة بشكل مختلف، لأنّ
grid-template-areas تحدّد في الواقع مساحة ثنائية الأبعاد، ويتم كتابة كل صف
كسلسلة منفصلة:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
نقاط يجب مراعاتها عند الاختيار بين الخيارَين
مع أي موضع، تعمل بنية display: masonry بشكل أفضل عندما يتعلق الأمر بتبديل الاتجاه. بما أنّ السمة masonry-track-* تعمل في أي اتجاه يمثّل محور الشبكة، كل ما عليك فعله لتغيير الاتجاه هو تغيير قيمة masonry-direction. في إصدار الشبكة، ستحتاج على الأقل إلى خصائص مكرّرة لتفعيل التبديل. ومع ذلك، راجِع الأمثلة السابقة
للاطّلاع على طرق أخرى يكون فيها تغيير الاتجاه أكثر تعقيدًا مع إصدار الشبكة.
الاختصارات
في هذا المنشور، تم استخدام الصيغ الطويلة لتوضيح السمات المستخدَمة، ولكن يمكن تحديد كل من الإصدارين display: masonry وdisplay: grid باستخدام الصيغ المختصرة.
باستخدام display: masonry
يستخدم الاختصار display: masonry الكلمة الرئيسية masonry. لإنشاء التصميم الأساسي
للبناء بالطوب، استخدِم رمز CSS التالي:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
لإنشاء تخطيط بسيط بنمط البناء الحرّ يستند إلى الصفوف، اتّبِع الخطوات التالية:
.masonry {
display: masonry;
masonry: row;
}
لتحديد المسارات وتصميم يستند إلى الصفوف باستخدام الصيغة المختصرة:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
باستخدام display: grid
لإنشاء التصميم الأساسي بنمط البناء باستخدام الاختصار grid
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
لإنشاء تخطيط بسيط بنمط البناء الحرّ يستند إلى الصفوف، اتّبِع الخطوات التالية:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
في الأمثلة الأكثر تعقيدًا، يمكن تضمين المزيد من الخصائص في الصيغة المختصرة بدون أن تصبح معقّدة بشكل مفرط، وذلك لأنّ بنية display:masonry الإجمالية أبسط.
على سبيل المثال، تخيّل إنشاء ثلاثة أعمدة باسم "أ" و"ب" و "ج"، يتم ملؤها من الأسفل إلى الأعلى.
باستخدام display:masonry
في display: masonry، يمكن ضبط كل هذه القيم الثلاث معًا في الاختصار:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
بما أنّها يتم تغيير حجمها تلقائيًا، ليس عليك تحديد الأحجام، ولكن إذا أردت حجمًا معيّنًا بدلاً من ذلك، يمكنك إضافته. على سبيل المثال:
masonry: column-reverse 50px 100px 200px "a b c";.
يمكن أيضًا إعادة ترتيب كل مكوّن بحرية، وليس هناك ترتيب معيّن عليك تذكُّره. وإذا أردت استخدام الصفوف بدلاً من ذلك، ما عليك سوى استبدال column-reverse بـ row أو row-reverse، وستبقى بقية الصيغة كما هي.
باستخدام display: grid
في display: grid، يجب ضبط هذه الجوانب الثلاثة بشكل منفصل:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
وكما هو الحال في مثال البناء بالطوب، يؤدي ذلك إلى تحديد حجم auto لجميع الأعمدة، ولكن إذا أردت توفير أحجام صريحة، يمكنك إجراء ذلك على النحو التالي:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
أو إذا كنت تريد استخدام "شبكة" لضبط الأحجام وأسماء المناطق معًا:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
في كلا المثالين، الترتيب مطلوب بشكل صارم، وسيكون مختلفًا إذا أردت عرض الصفوف بدلاً من ذلك. على سبيل المثال، يبدو التغيير إلى الصفوف على النحو التالي:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
أو، لوضعها كلها في صيغة مختصرة واحدة:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
نقاط يجب مراعاتها عند الاختيار بين الخيارَين
من المرجّح أن يتم استخدام الاختصار display: masonry على نطاق واسع، لأنّه اختصار بسيط نسبيًا. في العديد من الحالات، بالنسبة إلى تصميم "البناء بالحجارة" "standard"، ما عليك سوى ضبط تعريفات المسارات، ويمكن أن تفترض جميع القيم الأخرى القيمة التلقائية.
تستخدم النسخة display: grid الاختصار الحالي
grid، وهو اختصار معقّد إلى حد ما، وقد تبيّن لنا أنّه أقل استخدامًا من قِبل المطوّرين. كما هو موضّح في الأمثلة السابقة، حتى عند استخدامها لتنسيقات بسيطة
للبناء، يجب توخّي الحذر عند ضبط ترتيب القيم.
اعتبارات أخرى
تتناول هذه المشاركة بعض حالات الاستخدام الشائعة اليوم، ولكن لا نعرف ما قد يخبّئه المستقبل بشأن التصميم الشبكي أو تصميم البناء. من أهم الأسباب التي تدفعك إلى استخدام بنية display: masonry المنفصلة هو أنّها تتيح اختلاف القيمتين في المستقبل. في ما يتعلق بالقيم الأولية، مثل تلك الخاصة بـ masonry-template-tracks، قد يكون من المفيد إجراء تغييرات مختلفة في التنسيق المتراص عن التنسيق الشبكي. لا يمكننا تغيير الإعدادات التلقائية للشبكة إذا اخترنا الإصدار display: grid، ما قد يحدّ من الإجراءات التي نريد تنفيذها في المستقبل.
في هذه الأمثلة، يمكنك الاطّلاع على مواضع يجب فيها أن يتجاهل المتصفّح خصائص صالحة في الشبكة إذا تم استخدام التنسيق الحر.
على سبيل المثال grid-template-areas، حيث يتم تجاهل معظم القيم لأنّها تحدّد تنسيق شبكة ثنائي الأبعاد، بينما في التنسيق المتراص، نحدّد اتجاهًا واحدًا فقط بشكل كامل.
تقديم ملاحظاتك
اطّلِع على هذه الأمثلة، وعلى مسودة المواصفات التي تعرض كل إصدار بجانب الإصدار الآخر. يمكنك مشاركة رأيك من خلال إضافة تعليق على العدد 9041، أو إذا كنت تفضّل كتابة منشور على مدونتك أو على وسائل التواصل الاجتماعي، يُرجى إعلامنا بذلك على X أو LinkedIn.