مولّد CSS Grid

الحاوية المُنشأة

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): ثلاثة أعمدة تتقاسم العرض المتاح بالتساوي. 1fr جزء من المساحة المتبقية؛ minmax(0, 1fr) يسمح للأعمدة بالانكماش تحت حجم محتواها.
• gap: المسافة بين كل مسار.
• يتحول استعلام الوسائط إلى repeat(auto-fit, minmax(220px, 1fr))، أي أكبر عدد ممكن من الأعمدة، كل منها بعرض 220px على الأقل. نقطة الفصل هي عدد الأعمدة مضروبًا في أدنى عرض (بحد أدنى 120px)، لذلك على الشاشات الصغيرة تنتقل الشبكة إلى صفوف جديدة بدلًا من الانضغاط.

وحدة fr

تعني fr “جزءًا من المساحة المتبقية”: بعد طرح المسارات ذات الحجم الثابت، تُقسم المساحة المتبقية على العدد الكلي لوحدات fr.

grid-template-columns: 200px 1fr 2fr;

على حاوية بعرض 1000px، يأخذ العمود الأول 200px، وتُقسم الـ800px المتبقية بنسبة 1:2، أي 267px و533px.

auto-fill مقابل auto-fit

• auto-fill: ينشئ مسارات فارغة لسد الفراغ عندما لا تكون العناصر كافية.
• auto-fit: يطوي المسارات الفارغة إلى الصفر، فتمتد العناصر المتبقية لملء الصف.

يستخدم البديل المتجاوب auto-fit، وهو ما تريده شبكات البطاقات: يبدو الصف ممتلئًا دائمًا.

أعمدة بعروض مختلفة

ينشئ المولّد أعمدة متساوية. عدّل الناتج لخلط الأحجام: grid-template-columns: 200px 1fr 2fr; يمنحك شريطًا جانبيًا ثابتًا وعمودين مرنين بنسبة 1:2. للمناطق المسماة (grid-template-areas) أو التنسيب الصريح (grid-column: 1 / 3)، أضف هذه القواعد يدويًا فوق الحاوية المُنشأة.

Grid مقابل Flexbox

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

تجمع التخطيطات الحقيقية عادةً بين الاثنين: Grid لهيكل الصفحة، وFlexbox داخل المكونات.

أخطاء شائعة

• نسيان min-width: 0 على العناصر الفرعية: تستخدم عناصر الشبكة افتراضيًا أدنى عرض لمحتواها، ما يمنع أعمدة fr من الانكماش تحت أطول كلمة. ضع min-width: 0 على الفرعية لتسمح لها بالانكماش.
• التداخل دون display: grid: العنصر الفرعي للشبكة ليس شبكة بحد ذاته ما لم تعلن ذلك.