🌐 CSS Grid: ثورة في عالم تخطيط صفحات الويب 🚀

مرحباً بك في عالم CSS Grid! إذا كنت قد شعرت يوماً بالإحباط أثناء محاولتك ترتيب العناصر في صفحة الويب باستخدام float أو position، فاستعد لتغيير جذري. CSS Grid Layout (أو ببساطة Grid) هو نظام تخطيط ثنائي الأبعاد مصمم خصيصاً لإنشاء هياكل صفحات ويب معقدة ومرنة بسهولة فائقة. فكر فيه كشبكة من الصفوف والأعمدة يمكنك وضع العناصر داخلها بدقة وسلاسة.

بينما كان Flexbox رائعاً للترتيب في بعد واحد (صف أو عمود)، يأتي Grid ليحل مشكلة التخطيط في بعدين (صفوف و أعمدة) في وقت واحد. إنه مثل برنامج جداول البيانات (مثل Excel) لصفحة الويب الخاصة بك!

🧱 المكونان الأساسيان: الحاوية والعناصر

أول مفهومين يجب أن تفهمهما في Grid هما:

  1. Grid Container (حاوية الشبكة) 🗃️: هذا هو العنصر الأب الذي سيحتوي على الشبكة. نجعل أي عنصر div أو section أو main حاوية شبكة عن طريق تعيين خاصية display له بقيمة grid أو inline-grid.
  2. Grid Items (عناصر الشبكة) 📦: هذه هي العناصر الفرعية المباشرة داخل الحاوية. هم الذين سيتم ترتيبهم وفقاً لقواعد الشبكة.

لنرى مثالاً بسيطاً:

<!-- الملف index.html -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container"> <!-- هذا سيكون Grid Container -->
        <div class="item">عنصر 1</div> <!-- هذا Grid Item -->
        <div class="item">عنصر 2</div> <!-- هذا Grid Item -->
        <div class="item">عنصر 3</div> <!-- هذا Grid Item -->
        <div class="item">عنصر 4</div> <!-- هذا Grid Item -->
    </div>
</body>
</html>

/* الملف style.css */
.container {
  display: grid; /* This is the magic that turns the div into a grid container! */
  background-color: #f0f8ff;
  padding: 10px;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border: 2px solid #388E3C;
}

في هذه المرحلة، قمنا بإنشاء الحاوية، لكننا لم نحدد شكل الشبكة بعد، لذلك ستتراكم العناصر فوق بعضها بشكل افتراضي (أو تتصرف ككتلة).

📏 تعريف الشبكة: الأعمدة والصفوف

الخطوة التالية هي تعريف هيكل الشبكة نفسها. كم عموداً تريد؟ وكم صفاً؟ نستخدم خاصيتين لهذا الغرض:

  • grid-template-columns: تحدد عدد الأعمدة وحجم كل عمود.
  • grid-template-rows: تحدد عدد الصفوف وحجم كل صف.

لننشئ شبكة بسيطة مكونة من 3 أعمدة وصفين:

.container {
  display: grid;
  /* defining 3 columns: the first with a width of 100px, the second with a width of 200px, and the third with a width of 100px */

  grid-template-columns: 100px 200px 100px;

  /* defining 2 rows: the first with a height of 150px, and the second with a height of 100px */
  grid-template-rows: 150px 100px;

  background-color: #f0f8ff;
  padding: 10px;
  gap: 10px; /* space between items (we'll explain it later) */
}

النتيجة: ستكون لديك شبكة واضحة المعالم. العناصر ستملأ الخلايا واحدة تلو الأخرى من اليسار إلى اليمين، ومن أعلى إلى أسفل. العنصر 1 في الصف الأول، العمود الأول. العنصر 2 في الصف الأول، العمود الثاني... وهكذا.

🔢 وحدات القياس المرنة في Grid

لا يجب أن تكون الأعمدة والصفوف بأحجام ثابتة بالبكسل. يقدم Grid وحدات قياس قوية تجعله مرناً:

  • fr (الكسر أو Fraction): الوحدة الأهم في Grid. تقسم المساحة المتاحة إلى كسور. 1fr تعني "جزء واحد من المساحة الحرة". 
    grid-template-columns: 1fr 2fr 1fr;
    هنا، المساحة العرضية الكلية ستقسم إلى 4 أجزاء (1+2+1). العمود الأول يأخذ جزءاً، الثاني يأخذ جزأين (ضعف الأول)، الثالث يأخذ جزءاً.
  • auto: يأخذ الحجم المناسب لمحتوى العنصر داخل تلك الخلية.
  • %: النسبة المئوية من عرض أو ارتفاع الحاوية.
  • repeat(): دالة رائعة لتكرار نمط معين. 
    /* Instead of writing: 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr); /* create 4 columns, each with a width of 1fr */

مثال عملي يجمع بين هذه الوحدات:

.container {
  display: grid;
  /* a fixed side column of 200px, a main column that takes all the remaining space, and a fixed side column of 150px */
  grid-template-columns: 200px 1fr 150px;
  /* 3 rows: the first and third with the size of their content, and the second takes most of the height */
  grid-template-rows: auto 3fr auto;
  height: 400px; /* we need a specific height for the fr units to work in the rows */
}

↔️ المسافات بين العناصر: gap

لإضافة مسافة بين صفوف وأعمدة الشبكة دون الحاجة إلى هوامش معقدة على كل عنصر، نستخدم خاصية gap.

  • gap: تضيف مسافة موحدة بين جميع الصفوف والأعمدة.
  • row-gap: تضيف مسافة بين الصفوف فقط.
  • column-gap: تضيف مسافة بين الأعمدة فقط.
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* 20px space between all items horizontally and vertically */
  /* or you can specify: row-gap: 15px; column-gap: 30px; */
}

🎯 ملخص الدرس والخطوة التالية

تهانينا! 🎉 لقد تعلمت الأساسيات المتينة لـ CSS Grid:

  • فهمت الفرق بين Grid Container و Grid Items.
  • عرفت كيف تنشئ شبكة باستخدام grid-template-columns و grid-template-rows.
  • تعرفت على وحدات القياس المرنة مثل fr و auto ودالة repeat() المفيدة.
  • استخدمت خاصية gap البسيطة لتحسين المظهر.

هذه مجرد البداية. أنت الآن تملك القدرة على إنشاء تخطيطات منتظمة بسهولة.