شبكة Grid

يرتّب الـ Flexbox العناصر في اتجاه واحد، أمّا الـ Grid فيرتّبها في اتجاهين معًا، أي في أعمدة وصفوف، ولهذا يكون الـ Grid أقصر وأوضح حين يكون التخطيط شبكة فعلًا.

السطر grid-template-columns: repeat(3, 1fr) يصنع ثلاثة أعمدة متساوية، والوحدة fr تعني «حصّة من المساحة المتبقية» وليست مقاسًا ثابتًا.

وأقوى ما في الـ Grid هذا السطر: repeat(auto-fit, minmax(160px, 1fr))، فهو يصنع شبكة تختار عدد أعمدتها بنفسها حسب العرض المتاح، دون أي استعلام وسائط (media query).