🧱 فهم Grid Tracks: حجر الأساس في بناء تخطيطات CSS Grid

مرحباً بك في عالم CSS Grid! 🎨 إذا كنت تتخيل أن Grid Layout عبارة عن لوحة شطرنج أو جدول كبير لتنسيق المحتوى، فإن Grid Tracks هي الخطوط الأفقية والرأسية التي تحدد خانات هذا الجدول. ببساطة، الـ Track هو أي مسار بين خطين متوازيين في الشبكة. هذا يعني أن صفوف (Rows) وأعمدة (Columns) الشبكة هي Grid Tracks. في هذا الدرس، سنتعلم كيفية تعريف هذه المسارات والتحكم الكامل في حجمها وعددها، وهو ما يشكل الهيكل الأساسي لأي تخطيط نبنيه باستخدام Grid.

📏 ما هي Grid Tracks بالتحديد؟

لنتخيل معاً: عند تعريف display: grid على حاوية (Container)، فإننا نحولها إلى حاوية شبكية. لكن هذه الحاوية لا تعرف بعد كم عموداً أو صفاً ستتضمن. هنا يأتي دور تعريف المسارات (Tracks).

  • عمود (Column Track): المسار الرأسي بين خطين عموديين. يحدد عرض العمود.
  • صف (Row Track): المسار الأفقي بين خطين أفقيين. يحدد ارتفاع الصف.

المسارات هي التي تنشئ الهيكل أو "الإطار" الذي سيتم وضع العناصر (Items) بداخله. بدون تعريفها، لن تكون لدينا شبكة فعلية.

.container {
  display: grid;
  /* هنا نحدد المسارات (التخطيط) */
  grid-template-columns: 200px 200px 200px; /* 3 أعمدة، كل عرضها 200px */
  grid-template-rows: 100px 150px; /* صفين، ارتفاع الأول 100px والثاني 150px */
}

مثال بسيط: هنا قمنا بإنشاء شبكة مكونة من 3 أعمدة وصفين. كل Track له حجم ثابت.

🛠️ طرق تعريف Grid Tracks (الأعمدة والصفوف)

يمكننا تعريف المسارات باستخدام عدة وحدات قياس، مما يوفر مرونة هائلة:

1. الوحدات المطلقة (مثل البكسل px)

مثالية عندما تريد أحجاماً ثابتة لا تتغير مع حجم الشاشة.

.container {
  display: grid;
  grid-template-columns: 300px 150px 75px; /* 3 أعمدة بأعرض مختلفة وثابتة */
  grid-template-rows: 80px 200px; /* صفين بثبات */
}

2. الوحدات النسبية (مثل النسبة المئوية %)

تسمح للمسارات بالتمدد أو الانكماش نسبةً إلى عرض أو ارتفاع الحاوية الأم.

.container {
  display: grid;
  grid-template-columns: 60% 40%; /* عمودان، الأول يشغل 60% من العرض والثاني 40% */
  /* إذا كان عرض الحاوية 1000px، فسيكون عرض العمود الأول 600px والثاني 400px */
}

3. الوحدة الجديدة fr (الجزء أو Fraction) 🚀

هذه الوحدة هي سر قوة CSS Grid! توزع المساحة الحرة (الفضاء المتبقي) في الحاوية على أساس أجزاء.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 أعمدة */
}

كيف تعمل؟ تقسم العرض الكلي للحاوية إلى 4 أجزاء متساوية (1+2+1=4). العمود الأول يأخذ جزءاً واحداً، الثاني يأخذ جزأين (ضعف الأول)، والثالث يأخذ جزءاً واحداً. هي مرنة وتتغير مع حجم الحاوية.

⚙️ دوال مساعدة قوية مع Grid Tracks

دالة repeat(): لتكرار الأنماط

بدلاً من كتابة 200px 200px 200px 200px، يمكنك استخدام repeat() لتكرار النمط.

.container {
  display: grid;
  /* الطريقة الطويلة: grid-template-columns: 1fr 1fr 1fr 1fr; */
  /* الطريقة المختصرة باستخدام repeat: */
  grid-template-columns: repeat(4, 1fr); /* أنشئ 4 أعمدة، كل منها 1fr */
  grid-template-rows: repeat(3, 100px); /* أنشئ 3 صفوف، كل ارتفاعها 100px */
}

دالة minmax(): للحد الأدنى والأقصى للحجم

تسمح لك بتعريف Track بحجم مرن ضمن نطاق محدد. مثالية لجعل التصميم متجاوباً.

.container {
  display: grid;
  /* أنشئ عمودين */
  grid-template-columns: 200px minmax(300px, 1fr);
  /* العمود الأول: ثابت 200px */
  /* العمود الثاني: لا يقل عن 300px، ويمكنه التمدد ليشغل أي مساحة متبقية (1fr) إذا توفرت */
}

في المثال أعلاه، العمود الثاني مرن ولكنه لن يصبح أبداً أصغر من 300px، مما يحافظ على قابلية القراءة.

💡 مثال عملي شامل: بناء تخطيط بسيط

لنطبق ما تعلمناه لبناء هيكل تخطيط صفحة مصغرة.

<div class="page-layout">
  <header>الرأس 🏠</header>
  <aside>الشريط الجانبي 📖</aside>
  <main>المحتوى الرئيسي ✨</main>
  <footer>التذييل ©</footer>
</div>

.page-layout {
  display: grid;
  /* عرف 3 أعمدة: الشريط الجانبي ثابت 200px، والمحتوى الرئيسي يأخذ الباقي */
  grid-template-columns: 200px 1fr;
  /* عرف 3 صفوف: للرأس، للمحتوى (بارتفاع لا يقل عن 400px ويمكن التمدد)، وللتذييل */
  grid-template-rows: 80px minmax(400px, 1fr) 60px;
  /* حدد فجوة (Gap) بين العناصر */
  gap: 15px;
  height: 100vh; /* اجعل ارتفاع الحاوية كامل ارتفاع النافذة */
}

/* تلوين العناصر للتوضيح فقط */
header { background-color: lightblue; grid-column: 1 / 3; } /* يمتد على العمودين */
aside { background-color: lightcoral; }
main { background-color: lightgoldenrodyellow; }
footer { background-color: lightgray; grid-column: 1 / 3; } /* يمتد على العمودين */

في هذا التخطيط: استخدمنا fr و minmax() لإنشاء عمود رئيسي مرن وصف مرن، مع الحفاظ على أبعاد دنيا مناسبة.

🧪 تمارين سريعة للتفكير

  1. كيف تنشئ شبكة من 5 أعمدة متساوية العرض باستخدام repeat()؟
  2. إذا كان لديك grid-template-columns: 2fr 1fr 3fr; وعرض الحاوية 1200px، فكم سيكون عرض كل عمود؟ *(الحل: المجموع 6 أجزاء (2+1+3). العمود الأول: (2/6)1200 = 400px. الثاني: 200px. الثالث: 600px).

🎯 الخلاصة

تعتبر Grid Tracks هي الخطوة الأولى والأهم في بناء أي تخطيط باستخدام CSS Grid. من خلال grid-template-columns و grid-template-rows، تحدد الهيكل العظمي لشبكتك. تذكر أن:

  • px للقياسات الثابتة.
  • % للنسب المرنة بالنسبة للحاوية.
  • fr 🏆 هي الأقوى لتوزيع المساحة الحرة بشكل نسبي.
  • repeat() توفر وقتك وتبسط الكود.
  • minmax() تضمن مرونة مع الحفاظ على الحدود الدنيا أو القصوى.

بإتقانك لهذه المفاهيم، أصبحت جاهزاً لوضع العناصر داخل هذه الشبكة الرائعة التي أنشأتها!