Stax

مولد CSS Grid

بناء تخطيطات CSS Grid بصرياً مع معاينة مباشرة.

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

ما هو مولّد CSS Grid؟

أداة بصرية لإنشاء تخطيطات CSS Grid معقدة. ارسم الشبكة بصرياً، أضف عناصر، عدّل الفجوات - تحصل على CSS كامل ومنظم. أقوى نظام تخطيط في CSS، يحل ما كان مستحيلاً قبل 2017.

خصائص Grid الأساسية

  1. display: grid - تفعيل Grid
  2. grid-template-columns - تعريف الأعمدة
  3. grid-template-rows - تعريف الصفوف
  4. gap - مسافات بين الخلايا
  5. grid-template-areas - تخطيط مسمى

وحدات مرنة

  • fr - وحدة كسرية تقسم الفائض
  • auto - حسب المحتوى
  • minmax(100px, 1fr) - حد أدنى وأعلى
  • repeat(3, 1fr) - تكرار
  • auto-fit - يملأ الفراغ ديناميكياً

Grid + Flexbox

Grid للتخطيط الكلي للصفحة (header، sidebar، main، footer). Flex للمكونات داخل الخلايا (قوائم، أزرار). هذا النموذج يستخدمه كل المطورين المحترفين. الدعم العالمي 96.5% (caniuse) - آمن للإنتاج بدون قلق.

الأسئلة الشائعة

ما هو CSS Grid؟
نظام layout ثنائي البعد قوي. 'display: grid' يحول العنصر لشبكة. 'grid-template-columns: 1fr 2fr 1fr' = ثلاثة أعمدة بنسب 1:2:1. 'grid-template-rows: auto 1fr auto' = header، main، footer. أقوى من Flexbox للتخطيط المعقد.
ما هي fr؟
Fractional unit - وحدة كسرية. تقسم المساحة المتبقية. '1fr 2fr' = الثاني ضعف الأول. مزجها مع px ممكن: '200px 1fr 100px' = ثابت، مرن، ثابت. مفيد جداً للتخطيطات المتجاوبة بدون وسائط media queries.
كيف أدمج Grid و Flexbox؟
Grid للتخطيط الكلي للصفحة (header, sidebar, main, footer). Flex للمكونات داخل كل خلية (قائمة عناصر، أزرار). هذا النموذج يستخدمه أفضل المطورين. لا تختر بينهما - استخدم القوة الصحيحة لكل مهمة.
هل Grid يدعم الكل؟
Internet Explorer 11 يدعم Grid قديم (-ms- prefix). كل المتصفحات الحديثة (Chrome، Firefox، Safari، Edge) تدعم 100% منذ 2017. caniuse.com يظهر 96.5% دعم عالمي. آمن للاستخدام بدون قلق. لـ IE11 (1% الآن)، استخدم fallback Flexbox.

أدوات ذات صلة