Masonry Layout - A Dynamic Grid in booth ways vertical and horizontal

<style>
  .ultimate-masonry {
    column-count: 3;
    column-gap: 20px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f9f9f9;
  }

  .block {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
    break-inside: avoid;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  /* Different Heights and Colors for the 8 Blocks */
  .b1 { height: 120px; background: #FF5733; }
  .b2 { height: 280px; background: #33FF57; }
  .b3 { height: 160px; background: #3357FF; }
  .b4 { height: 220px; background: #F333FF; }
  .b5 { height: 140px; background: #FF33A1; }
  .b6 { height: 300px; background: #33FFF5; }
  .b7 { height: 180px; background: #FFC300; }
  .b8 { height: 240px; background: #581845; }

  /* Responsive breakpoints */
  @media (max-width: 800px) { .ultimate-masonry { column-count: 2; } }
  @media (max-width: 500px) { .ultimate-masonry { column-count: 1; } }
</style>

<div class="ultimate-masonry">
  <div class="block b1">Block 1<br>120px</div>
  <div class="block b2">Block 2<br>280px</div>
  <div class="block b3">Block 3<br>160px</div>
  <div class="block b4">Block 4<br>220px</div>
  <div class="block b5">Block 5<br>140px</div>
  <div class="block b6">Block 6<br>300px</div>
  <div class="block b7">Block 7<br>180px</div>
  <div class="block b8">Block 8<br>240px</div>
</div>

Block 1
120px

Block 2
280px

Block 3
160px

Block 4
220px

Block 5
140px

Block 6
300px

Block 7
180px

Block 8
240px

ما هو تخطيط Masonry؟

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

الأنواع الرئيسية للتخطيطات

الشبكة القياسية (Standard Grid): تتماشى العناصر بدقة في صفوف وأعمدة. إذا كان أحد العناصر في الصف أطول من الآخرين، فإنه يفرض فجوة فارغة كبيرة أسفل العناصر الأقصر.
الأعمدة المتعددة (Multi-Column): تتدفق العناصر رأسياً مثل الصحف. ورغم أن هذا يلغي الفجوات، إلا أنه يخلق ترتيباً رأسياً للقراءة (1، 2، 3 في العمود الأول).
تخطيط Masonry الحقيقي: تتدفق العناصر أفقياً عبر الأعمدة ولكنها تنجذب للأعلى لملء الفجوات، مما يحافظ على ترتيب قراءة منطقي وهيكل بصري متماسك.

كيف تعمل منطقية Masonry؟

في تطوير الويب الحديث، يمكن تحقيق هذا التخطيط من خلال عدة طرق تقنية:

خاصية CSS Column-Count: أبسط طريقة تستخدم خصائص المتصفح الأصلية لتوزيع العناصر في أعمدة.
توسيع الشبكة (CSS Grid Spanning): تقنية تستخدم grid-auto-rows حيث "يمتد" العنصر عبر عدد معين من الصفوف الصغيرة بناءً على ارتفاعه.
مكتبات JavaScript: استخدام أدوات مثل Masonry.js لحساب مواقع العناصر بالبكسل بدقة عند الحاجة إلى فرز أو تصفية ديناميكية.

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

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

WHAT IS MASONRY LAYOUT

A Masonry Layout is a grid-style arrangement where items are placed in columns, but unlike a standard grid, they do not have a fixed row height. Think of it like a bricklayer fitting stones of different sizes together. Instead of waiting for a new "row" to start, each item rises up to fill the empty gap left by the item directly above it. This optimizes vertical space and creates a visually engaging, organic flow for images and articles.

THE MAIN TYPES OF LAYOUTS

Standard Grid: Items align strictly in rows and columns. If one item in a row is taller than the others, it forces a large empty gap under the shorter items.
Multi-Column: Items flow vertically like a newspaper. While this eliminates gaps, it creates a vertical reading order (1, 2, 3 in the first column).
True Masonry: Items flow horizontally across columns but snap upward to fill gaps, maintaining a logical reading order and a tight visual structure.

HOW THE MASONRY LOGIC WORKS

In modern web development, achieving this layout can be done through various technical approaches:

CSS Column-Count: The simplest method that uses native browser properties to distribute items into columns.
CSS Grid Spanning: A technique using grid-auto-rows where items "span" a specific number of tiny rows based on their height.
JavaScript Libraries: Using tools like Masonry.js to calculate exact pixel positions when dynamic sorting or filtering is required.

WHY USE MASONRY

Eliminates Dead Space: It removes the "white space trap" caused by varying image or text heights, creating a dense, professional look.
Better for Discovery: It encourages scrolling and exploration, making it the industry standard for portfolios, Pinterest-style boards, and social feeds.
Responsive Scaling: It is inherently fluid. You can easily adjust the column count based on screen width (e.g., 4 columns for desktop, 1 for mobile) without breaking the layout logic.

Reference : https://stackoverflow.com/questions/37831506/grid-view-same-width-different-heights-3-columns-css

lal consultancy | لال للاستشارات

بحث هذه المدونة الإلكترونية