شبكة Grid

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

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

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