تخطيط Masonry: نهجا CSS وJS
أنشئ شبكات Masonry بأسلوب Pinterest باستخدام column-count في CSS واستراتيجيات بديلة في JavaScript.
تخطيط Masonry: نهجا CSS وJS درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو Masonry؟
يضع تخطيط Masonry العناصر في أعمدة، بحيث يملأ كل عنصر المساحة الرأسية التالية المتاحة، على غرار Pinterest. وتكون عروض الأعمدة متساوية، بينما تختلف ارتفاعات العناصر. والنتيجة شبكة كثيفة وديناميكية بصريًا، من دون مساحات بيضاء مهدرة بين الصفوف.
Masonry باستخدام CSS Grid (تجريبي)
يدعم Chrome وFirefox، عند تفعيل خيار تجريبي، grid-template-rows: masonry. توضع العناصر في أعمدة، لكن تُحدَّد أحجام الصفوف وفق ارتفاع محتواها، ما يسمح بتكديس العناصر ذات الارتفاعات المختلفة من دون فجوات. وهذا هو الحل الأصلي المستقبلي.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>أسلوب أعمدة CSS
تنشئ أعمدة CSS تخطيطًا شبيهًا بـ Masonry: columns: 3; column-gap: 1rem. وتتدفق العناصر تلقائيًا من الأعلى إلى الأسفل داخل كل عمود. لكن هذا الأسلوب يرتب العناصر عمودًا بعد عمود، من أعلى العمود الأول ثم أعلى العمود الثاني، وليس صفًا بعد صف، ما يؤثر في ترتيب القراءة وإمكانية الوصول.
تجنب فواصل الأعمدة
امنع انقسام العناصر بين الأعمدة باستخدام break-inside: avoid في كل عنصر. من دون ذلك، قد تنقسم بطاقة طويلة بين عمودين، فتُقطع محتوياتها إلى نصفين. أضف هذا دائمًا عند استخدام أعمدة CSS لمحتوى يشبه البطاقات.
مكتبات Masonry باستخدام JavaScript
تعيد Masonry.js، التي طوّرها David DeSandro، تموضع العناصر ذات الموضع المطلق عبر حساب ارتفاعات الأعمدة ووضع كل عنصر في أقصر عمود. وتوسّع Isotope هذا الأسلوب بإضافة الفرز والتصفية. ويتطلب كلاهما JavaScript لحساب المواضع وتطبيقها.
مزيج CSS Grid وJS
أحد الأساليب خفيفة الوزن هو تعريف Grid بأعمدة ثابتة وصفوف بارتفاع 1px، ثم استخدام JS لضبط grid-row-end: span N لكل عنصر بناءً على ارتفاع محتواه مقسومًا على ارتفاع الصف. وتحافظ العناصر على محاذاة صفوف Grid مع تحقيق ارتفاعات مختلفة.
استخدام ResizeObserver لإعادة الحساب
تصبح مواضع Masonry قديمة عند تغير حجم النافذة أو تحميل الصور. استخدم ResizeObserver لاكتشاف تغيرات الحجم وتشغيل إعادة الحساب. وأجّل عمليات إعادة الحساب لتجنب إجراء حسابات مفرطة أثناء أحداث تغيير الحجم السريعة.
تحميل الصور واستقرار التخطيط
تتسبب الصور ذات الارتفاعات غير المعروفة في إعادة حساب Masonry بعد تحميلها. حدّد سمتي العرض والارتفاع صراحةً لجميع الصور حتى يحجز المتصفح مساحة قبل التحميل. ويمنع ذلك تغيّر المواضع ويقلل عدد مرات إعادة الحساب.
التمرير اللانهائي مع Masonry
يتطلب إلحاق عناصر بتخطيط Masonry إعادة حساب الأعمدة المتأثرة فقط، أي الأعمدة التي أضيفت إليها العناصر الجديدة، وليس الشبكة بأكملها. وتدعم مكتبات مثل Masonry.js تحريك العناصر الملحقة والتخطيط التدريجي من دون إعادة تخطيط كاملة مع كل دفعة جديدة.
اعتبارات إمكانية الوصول
يختلف الترتيب المرئي في Masonry عن ترتيب DOM في التخطيطات التي تضع العناصر باستخدام JavaScript. احرص على أن يتبع ترتيب Tab ترتيب DOM، أي تسلسل القراءة المنطقي، لا الموضع المرئي. وأضف tabindex بحذر، أو اعتمد على تدفق DOM الطبيعي للتنقل باستخدام لوحة المفاتيح.
مقايضات Masonry باستخدام CSS فقط
أعمدة CSS بسيطة ولا تحتاج إلى JS، لكنها تستخدم تسلسل قراءة مرتبًا حسب الأعمدة لا الصفوف، ولا توفر التصفية أو الفرز. أما Masonry في Grid فلم يحظَ بدعم جاهز للإنتاج بعد. ويوفر Masonry باستخدام JS ميزات كاملة، لكنه يضيف حجمًا وتأخيرًا في العرض، إذ تُحسب المواضع بعد تحميل المحتوى.
اختبار المعرفة
ما خاصية CSS التي تمنع انقسام بطاقة بين عمودين من أعمدة CSS؟
الملخص
يمكن تحقيق تخطيط Masonry باستخدام أعمدة CSS، وهي بسيطة لكنها ترتب العناصر حسب الأعمدة، أو باستخدام grid-template-rows: masonry التجريبية التي تتجه نحو المستقبل، أو باستخدام مكتبات JavaScript مثل Masonry.js التي توفر ميزات كاملة مع الفرز والتصفية. ولكل أسلوب مقايضات بين البساطة وإمكانية الوصول والقدرات المتاحة.
الأسئلة الشائعة
هل درس «تخطيط Masonry: نهجا CSS وJS» مجاني؟
نعم — نص درس «تخطيط Masonry: نهجا CSS وJS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «تخطيط Masonry: نهجا CSS وJS»؟
أنشئ شبكات Masonry بأسلوب Pinterest باستخدام column-count في CSS واستراتيجيات بديلة في JavaScript. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «تخطيط Masonry: نهجا CSS وJS»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تخطيط تذييل جانبي ثابت
- تخطيط الكأس المقدسة باستخدام Grid
- تخطيط Masonry: نهجا CSS وJS
- التصميم الجوهري: تحديد الحجم حسب المحتوى