CSS Grid من الصفر إلى تصميم متاجر ومجلات بأجمل وأوضح طريقة ممكنة!

غير محدد مجاني
CSS Grid — الشبكة التي تستخدمها المواقع العملاقة

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

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

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

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

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

;display: grid

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

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

grid-template-columns

عدد الأعمدة

grid-template-rows

عدد الصفوف

gap

المسافة بين الخلايا

fr

وحدة مرنة (fraction)

grid-column / grid-row

تمديد العنصر

grid-template-areas

رسم التخطيط بالكلمات

justify-items

محاذاة أفقية داخل الخلية

align-items

محاذاة عمودية داخل الخلية

معلومة سريعة

في Grid غالبًا تبدأ بـ: columns + gap، وبعدها تنتقل لـ auto-fit/minmax عشان يصير التصميم متجاوب تلقائيًا.

غيّر عدد الأعمدة و 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

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

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