تخطيط Masonry في CSS: دليل شامل للشبكات على غرار Pinterest

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

ما هو تخطيط Masonry؟

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

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

لماذا نستخدم تخطيط Masonry؟

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

تقنيات التنفيذ

يمكن استخدام عدة تقنيات لتنفيذ تخطيط Masonry باستخدام CSS، ولكل منها مزاياها وعيوبها. دعنا نستكشف الأساليب الأكثر شيوعًا:

1. أعمدة CSS (بسيطة ولكنها محدودة)

تستخدم أبسط طريقة خاصيتي column-count و column-gap في CSS. هذا النهج سهل التنفيذ ولكنه يحتوي على قيود من حيث التحكم في ترتيب وموضع العناصر.

مثال:

            .masonry {
  column-count: 3; /* Adjust for desired number of columns */
  column-gap: 1em;
}

.masonry-item {
  break-inside: avoid; /* Prevent items from being split across columns */
}

            

              
                Copy
              
            
          

الشرح:

• تحدد خاصية column-count عدد الأعمدة في التخطيط. اضبط هذه القيمة بناءً على حجم الشاشة والشكل الجمالي المطلوب.
• تحدد خاصية column-gap المسافة بين الأعمدة.
• تمنع خاصية break-inside: avoid تقسيم العناصر عبر الأعمدة، مما يضمن بقاء كل عنصر سليمًا.

القيود:

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

2. شبكة CSS (مزيد من التحكم والمرونة)

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

مثال (أساسي):

            .masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1em;
  grid-auto-rows: 200px; /* Adjust this for varying item heights */
}

.masonry-item {
  grid-row: span 2; /* Example: Some items span two rows */
}

            

              
                Copy
              
            
          

الشرح:

• تُفعِّل خاصية display: grid تخطيط شبكة CSS للحاوية.
• تنشئ خاصية grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) أعمدة متجاوبة تتكيف تلقائيًا مع المساحة المتاحة. تحدد minmax الحد الأدنى والأقصى لعرض كل عمود.
• تحدد خاصية grid-gap المسافة بين عناصر الشبكة.
• تحدد خاصية grid-auto-rows الارتفاع الافتراضي لصفوف الشبكة. هذا أمر حاسم لعمل Masonry. إذا تجاوز المحتوى هذا الارتفاع، سيتوسع الصف.
• تسمح خاصية grid-row: span 2 (على عناصر محددة) للعناصر الفردية بالامتداد عبر صفوف متعددة، مما يخلق التأثير المتدرج المميز. ستحتاج إلى حساب قيم span ديناميكيًا باستخدام JavaScript للسيناريوهات الأكثر تعقيدًا.

تقنيات شبكة CSS المتقدمة:

• مناطق الشبكة المسماة: للتخطيطات الأكثر تعقيدًا، يمكنك تحديد مناطق شبكة مسماة وتعيين العناصر إلى مناطق محددة.
• دوال الشبكة: استخدم minmax()، وrepeat()، وغيرها من دوال الشبكة لإنشاء تخطيطات ديناميكية ومتجاوبة.

التحديات مع شبكة CSS:

• يمكن أن يكون تنفيذ تخطيط masonry *حقيقي* بمحاذاة عمودية مثالية باستخدام شبكة CSS فقط أمرًا معقدًا. يتمثل التحدي الرئيسي في تعيين امتدادات الصفوف والأعمدة الصحيحة لكل عنصر ديناميكيًا، وهو ما يتطلب غالبًا مساعدة JavaScript.
• حساب الامتدادات غير ممكن باستخدام CSS وحدها؛ ومع ذلك، توفر شبكة CSS أساسًا رائعًا لهيكل التخطيط.

3. مكتبات Masonry بجافاسكريبت (أقصى قدر من المرونة والتحكم)

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

• Masonry (Metafizzy): مكتبة مستخدمة على نطاق واسع وموثقة جيدًا. https://masonry.desandro.com/
• Isotope (Metafizzy): مكتبة أكثر تقدمًا تجمع بين Masonry وقدرات التصفية والفرز. https://isotope.metafizzy.co/
• Wookmark jQuery Plugin: إضافة خفيفة الوزن لإنشاء تخطيطات ديناميكية. (صيانتها أقل نشاطًا من Masonry.)

مثال (باستخدام Masonry):

HTML:

            <div class="masonry">
  <div class="masonry-item">...</div>
  <div class="masonry-item">...</div>
  <div class="masonry-item">...</div>
  ...
</div>

            

              
                Copy
              
            
          

JavaScript:

            <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script>
  var elem = document.querySelector('.masonry');
  var msnry = new Masonry( elem, {
    // options
    itemSelector: '.masonry-item',
    columnWidth: 200 // Adjust as needed
  });
</script>

            

              
                Copy
              
            
          

الشرح:

• قم بتضمين مكتبة Masonry في ملف HTML الخاص بك.
• حدد عنصر الحاوية باستخدام JavaScript.
• قم بتهيئة Masonry بالخيارات المطلوبة، مثل محدد العنصر وعرض العمود.

فوائد استخدام مكتبات JavaScript:

• تخطيط تلقائي: تتعامل المكتبة مع الحسابات المعقدة وتحديد مواضع العناصر.
• الاستجابة: يتكيف التخطيط تلقائيًا مع أحجام الشاشات المختلفة.
• التخصيص: يمكنك تخصيص التخطيط بخيارات وإعدادات متنوعة.
• التصفية والفرز: توفر Isotope قدرات تصفية وفرز متقدمة.

أفضل الممارسات لتخطيطات Masonry في CSS

• تحسين الصور: استخدم صورًا مُحسَّنة لتحسين أوقات تحميل الصفحة. ضع في اعتبارك استخدام الصور المتجاوبة (<picture> عنصر أو srcset سمة على <img> وسوم) لتقديم أحجام صور مختلفة بناءً على حجم الشاشة. يمكن أن تساعد خدمات مثل Cloudinary أو ImageKit في تحسين الصور تلقائيًا وتسليمها لجمهور عالمي.
• التحميل الكسول (Lazy Loading): قم بتنفيذ التحميل الكسول لتحميل الصور فقط عندما تكون مرئية في منفذ العرض. يمكن أن يؤدي هذا إلى تحسين أداء التحميل الأولي للصفحة بشكل كبير، خاصة للتخطيطات التي تحتوي على العديد من الصور.
• إمكانية الوصول: تأكد من أن التخطيط متاح للمستخدمين ذوي الإعاقة. استخدم HTML الدلالي المناسب، وقدم نصًا بديلاً للصور، وتأكد من أن التخطيط قابل للتنقل باستخدام لوحة المفاتيح.
• الأداء: قلل من استخدام JavaScript و CSS لتحسين الأداء. استخدم تحويلات CSS بدلاً من خصائص تحديد الموضع للحصول على رسوم متحركة أكثر سلاسة.
• التوافق عبر المتصفحات: اختبر التخطيط في متصفحات مختلفة لضمان التوافق. استخدم بادئات CSS عند الضرورة لدعم المتصفحات القديمة. بينما تدعم المتصفحات الحديثة شبكة CSS بشكل جيد بشكل عام، قد تتطلب المتصفحات القديمة حلولًا بديلة أو polyfills.
• ضع في اعتبارك المحتوى المؤقت: أثناء تحميل الصور، اعرض محتوى مؤقتًا (على سبيل المثال، نسخة غير واضحة من الصورة أو كتلة لونية بسيطة) لتوفير تجربة مستخدم أفضل. هذا يمنع التخطيط من القفز أثناء تحميل الصور.
• الحفاظ على نسب العرض إلى الارتفاع: عند التعامل مع الصور، حاول الحفاظ على نسب عرض إلى ارتفاع متسقة ضمن نطاقات معقولة. يمكن أن يساعد هذا في منع الفجوات الكبيرة في التخطيط. إذا لزم الأمر، قم بقص الصور أو إضافة حشو لها لتحقيق نسب العرض إلى الارتفاع المطلوبة.
• تجنب كثافة المحتوى المفرطة: لا تزدحم التخطيط بالكثير من المحتوى. تأكد من وجود مساحة بيضاء كافية بين العناصر لإنشاء تصميم جذاب بصريًا وقابل للقراءة.
• الاختبار على أجهزة مختلفة: اختبر التخطيط بدقة على أجهزة وأحجام شاشات مختلفة لضمان الاستجابة وتجربة عرض مثالية.
• التدويل (i18n): ضع في اعتبارك التدويل إذا كان موقعك يستهدف جمهورًا عالميًا. تأكد من أن التخطيط يتكيف مع اتجاهات النصوص المختلفة (مثل اللغات من اليمين إلى اليسار) ومجموعات الأحرف. استخدم وحدات مرنة (مثل em أو rem) للتحجيم والتباعد لاستيعاب أحجام الخطوط وأطوال النصوص المختلفة.

أمثلة على تخطيطات Masonry قيد التنفيذ

• Pinterest: المثال الجوهري لتخطيط Masonry، حيث يعرض الصور والروابط بطريقة جذابة بصريًا ومنظمة.
• Dribbble: منصة للمصممين، تستخدم Dribbble تخطيط Masonry لعرض مشاريع التصميم.
• مواقع التجارة الإلكترونية: تستخدم العديد من مواقع التجارة الإلكترونية تخطيطات Masonry لعرض قوائم المنتجات، خاصة للفئات التي تعتمد على الجانب البصري مثل الملابس أو السلع المنزلية. فكر في ASOS أو Etsy كأمثلة عالمية محتملة.
• مواقع المحافظ الشخصية (Portfolio): غالبًا ما يستخدم المصورون والفنانون وغيرهم من المبدعين تخطيطات Masonry لعرض أعمالهم بطريقة ديناميكية وجذابة بصريًا.
• مواقع الأخبار والمجلات: تستخدم بعض مواقع الأخبار والمجلات تخطيطات Masonry لعرض المقالات والمحتويات الأخرى، خاصة في صفحتها الرئيسية أو صفحات الفئات.

توافق المتصفحات

• أعمدة CSS: مدعومة بشكل جيد بشكل عام عبر المتصفحات الحديثة.
• شبكة CSS: مدعومة على نطاق واسع في المتصفحات الحديثة، لكن المتصفحات القديمة قد تتطلب polyfills.
• مكتبات Masonry بجافاسكريبت: توفر أفضل توافق عبر المتصفحات، حيث تتعامل مع حسابات التخطيط وتحديد مواضع العناصر مباشرة. ومع ذلك، فهي تعتمد على JavaScript، والتي قد يعطلها بعض المستخدمين.

اختبر دائمًا تخطيط Masonry الخاص بك في متصفحات وأجهزة مختلفة لضمان تجربة مستخدم متسقة.

الخاتمة

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