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

...

css:

العرض: الشبكة ؛ شبكة أوتو الصفوف: 50 بكسل ؛ فجوة الشبكة: 10 بكسل ؛ أعمدة الشبكة-تكرار (تلقائي ، minmax (30 ٪ ، 1FR)) ؛ } [قصير] { صف الشبكة: span 1 ؛ خلفية اللون: الأخضر. } [طويل] { صف الشبكة: span 2 ؛ لون الخلفية: قرمزي ؛ } [أطول] { صف الشبكة: span 3 ؛ لون الخلفية: الأزرق. } [الأطول] { صف الشبكة: span 4 ؛ لون الخلفية: رمادي. }

  
  
  ...

وحدات البكسل.

 1fr).