CSS Grid: المخطط الهندسي الذي يحول صفحتك البيضاء إلى تصميم احترافي

30:00 دقيقة مجاني
CSS Grid — الشبكة التي تستخدمها المواقع العملاقة

هل لاحظت يوماً كيف تترتب المقالات في المجلات العالمية بشكل متناسق ومريح للعين؟

هل سبق وحاولت تصميم "لوحة" لموقعك وتحيرت كيف تضع الهيدر في الأعلى، والقائمة على اليمين، والمحتوى في المنتصف بدقة متناهية؟

خلف هذا الجمال في الويب يقف بطل واحد: CSS Grid.

إذا كان Flexbox هو الأداة المثالية لترتيب العناصر في سطر واحد، فإن CSS Grid هو "المخطط الهندسـي" الكامل. هو النظام الذي يمنحك القوة لتقسيم الصفحة إلى صفوف وأعمدة ذكية، لتبني هيكل موقعك (Layout) بكل ثبات وسهولة، تماماً كما خططت له في مخيلتك.

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

;display: grid

هذه الكلمة تحول أي حاوية إلى شبكة سحرية

أهم خصائص Grid التي ستستخدمها كثيرًا

بعد أن تتقن هذه الخصائص العشر، ستتمكن من بناء أي تخطيط معقد بسهولة وسرعة. إليك شرحًا مبسطًا وواضحًا لكل خاصية على حدة مع أمثلة عملية:

1. grid-template-columns

المهمة: تحدد عدد الأعمدة وأحجامها في الشبكة.

هذه هي الخاصية الأكثر استخدامًا في Grid، فهي التي ترسم الهيكل الأساسي للصفحة.

أمثلة شائعة:

grid-template-columns: 1fr 1fr 1fr; → ثلاثة أعمدة متساوية

grid-template-columns: 200px 1fr 300px; → عمود ثابت + عمود مرن + عمود ثابت

grid-template-columns: repeat(4, 1fr); → أربعة أعمدة متساوية (أقصر طريقة)

2. grid-template-rows

المهمة: تحدد عدد الصفوف وارتفاعاتها.

تُستخدم عادةً عندما تريد التحكم الدقيق في ارتفاع الصفوف (مثل الهيدر والفوتر).

مثال:

grid-template-rows: 80px 1fr 70px; → صف علوي ثابت + صف مرن في المنتصف + صف سفلي ثابت

3. gap

المهمة: إضافة مسافة متساوية بين الخلايا (بين الأعمدة والصفوف).

تعمل بنفس طريقة gap في Flexbox وهي أنظف بكثير من استخدام margin.

أمثلة:

gap: 20px; → مسافة 20 بكسل أفقيًا وعموديًا
gap: 16px 24px; → مسافة عمودية 16px وأفقية 24px

4. fr (وحدة Fraction)

المهمة: وحدة مرنة تعني "جزء" من المساحة المتاحة.

هي السر الحقيقي وراء قوة Grid. كلما زاد الرقم، أخذ العمود أو الصف مساحة أكبر.

مثال:

grid-template-columns: 1fr 2fr 1fr; → العمود الثاني يأخذ ضعف مساحة العمودين الآخرين

grid-template-columns: 200px 1fr 1fr; → عمود ثابت 200px ثم عمودان متساويان يتقاسمان باقي المساحة

5. grid-column و grid-row (تمديد العنصر)

المهمة: تمديد العنصر ليأخذ أكثر من خلية واحدة (عمود أو صف).

أمثلة:

grid-column: span 2; → يمتد العنصر على عمودين
grid-column: 1 / 4; → يبدأ من العمود الأول وينتهي عند العمود الرابع
grid-row: span 3; → يمتد على ثلاثة صفوف

6. grid-template-areas

المهمة: أجمل وأوضح طريقة لرسم تخطيط الصفحة بالكلمات.

تسمح لك بتصميم الهيكل كأنك ترسمه على ورقة، ثم تربط كل منطقة بعنصرها.

مثال كلاسيكي:

grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";

7. justify-items

المهمة: محاذاة المحتوى أفقيًا داخل كل خلية.

القيم الشائعة: start | center | end | stretch

8. align-items

المهمة: محاذاة المحتوى عموديًا داخل كل خلية.

تستخدم كثيرًا مع justify-items: center لتوسيط المحتوى داخل البطاقات.

معلومة سريعة ذهبية

في معظم المشاريع الواقعية تبدأ بهذا الترتيب:

1. display: grid;
2. grid-template-columns + gap
3. ثم تنتقل إلى repeat(auto-fit, minmax(250px, 1fr)) لجعل التصميم متجاوبًا تلقائيًا مع جميع الشاشات.

هذه الثلاثة فقط (display: grid + columns + gap) تكفي لبناء ٨٠٪ من التصاميم اليومية.

نصيحة احترافية

ابدأ دائمًا بـ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); عند تصميم قوائم المنتجات أو المقالات. هذا السطر الواحد يجعل التصميم يتكيف تلقائيًا مع الموبايل والتابلت والشاشات الكبيرة.

غيّر عدد الأعمدة و gap وجرّب minmax/auto-fit… وشوف الشبكة تتغير فورًا

الإعدادات

CSS الناتج

display: grid;

ملاحظة: وضع auto-fit + minmax هو الأفضل للتجاوب مع الشاشات.

المعاينة

جرّب تصغير نافذة المتصفح وشاهد كيف auto-fit يتكيف تلقائيًا

أمثلة تفيدك(انسخ وجرب)

متجر إلكتروني (٤ منتجات)

.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.product {
  background: white;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

تخطيط كامل بالكلمات (areas)

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: 80px 1fr 70px;
  gap: 10px;
  height: 100vh;
}
header {grid-area: header;}
nav    {grid-area: nav;}
main   {grid-area: main;}
aside  {grid-area: aside;}
footer {grid-area: footer;}

اختر تخطيط جاهز وشاهد الشبكة + انسخ CSS مباشرة

الإعدادات

CSS الناتج

display: grid;

المعاينة

هذه أقوى ميزة في Grid: ترسم التخطيط بالكلمات!

تمرين الأبطال: متجر إلكتروني كامل في ٤٠ سطر! 

<div class="store">
  <div class="product">منتج 1</div>
  <div class="product">منتج 2</div>
  <div class="product">منتج 3</div>
  <div class="product">منتج 4</div>
</div>

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

مهمتك الآن:

  1. أضف ١٢ منتج.
  2. غيّر minmax(250px, 1fr) إلى minmax(200px, 1fr) وشاهد الفرق.
  3. جرّب رفع gap إلى 30.

خلاصة Grid في ٣ أشياء:

display:grid + columns + gap

إذا أتقنت الثلاثة… تقدر تبني أي تخطيط معقّد بسهولة.

الدرس القادم: Responsive + Media Queries

كيف يظهر موقعك مذهلاً على الجوال والتابلت والشاشات الكبيرة تلقائيًا!

الدرس التالي العودة للسابق