grid-template-columns

خاصية أعمدة الشبكة grid-template-columns

خاصية grid-template-columns ترسم أعمدة شبكة grid — ومع repeat وminmax وauto-fit تبني شبكات متجاوبة بسطر واحد بلا أي media query.

قلب نظام Grid: تكتب فيها عرض كل عمود فتتوزع العناصر تلقائيًا. وحدة fr الذهبية تعني «حصة من المساحة الحرة»: 1fr 2fr = عمودان الثاني ضعف الأول.

والسطر الذي يستحق الحفظ حرفيًا — شبكة بطاقات متجاوبة كاملة بلا استعلامات وسائط:

repeat(auto-fit, minmax(250px, 1fr)) — «أعمدة لا تقل عن 250px، املأ ما يتسع منها، ومددها لتقاسم الباقي». هذا السطر نفسه يرصف بطاقات هذا الموقع.

الصياغة

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
  .grid div { background: #7c5cff; color: white; padding: 18px; border-radius: 10px; text-align: center; }
</style>
<div class="grid">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<p>ضيّق المعاينة وشاهد الأعمدة تعيد ترتيب نفسها وحدها.</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
1fr	حصة من المساحة الحرة — عملة Grid الأساسية
repeat(3, 1fr)	اختصار ثلاثة أعمدة متساوية
minmax(250px, 1fr)	عمود لا يضيق عن حد ولا يبخل بالتمدد
auto-fit / auto-fill	عدد أعمدة تلقائي حسب المتاح — سر التجاوب بلا media

💡 نصائح عملية

احفظ repeat(auto-fit, minmax(X, 1fr)) — أكثر سطر grid ستكتبه في حياتك
auto-fit يمدد الأعمدة الموجودة، وauto-fill يبقي أماكن فارغة — جرب الاثنين لترى

⚠️ أخطاء شائعة

أعمدة بكسل ثابتة ثم معاناة الجوال — fr وminmax وُجدتا لهذا
استخدام grid لصف واحد بسيط — flex أخف وأنسب هناك

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs