TL
Tool Lab
💰Donate
💰Donate

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

حول هذه الأداة

مولّد تخطيط CSS Grid يتيح لك تصميم تخطيطات الشبكة ثنائية الأبعاد بصريًا عبر ضبط grid-template-columns وgrid-template-rows وخصائص الفجوة وإعدادات المحاذاة. تُظهر المعاينة المباشرة النتيجة قبل كتابة أي كود.

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

كيفية الاستخدام

  1. اضبط grid-template-columns لتحديد هيكل الأعمدة. استخدم أزرار الإعدادات المسبقة للأنماط الشائعة.
  2. اضبط grid-template-rows اختياريًا (اتركه auto لمعظم التخطيطات).
  3. اضبط column-gap وrow-gap للمسافات.
  4. استخدم justify-items وalign-items للتحكم في موضع العناصر داخل الخلايا.
  5. غيّر عدد العناصر بالشريط المنزلق لرؤية استجابة الشبكة.
  6. انقر نسخ لنسخ CSS المنشأ.

حالات الاستخدام

يستخدم مطورو الواجهة الأمامية CSS Grid لتخطيطات الصفحات ولوحات المعلومات وصالات الصور. يصدّر المصممون مواصفات الشبكة كـ CSS دقيق لمشاركته مع المطورين. تستخدمه فرق نظام التصميم لنمذجة أنماط المسافات والأعمدة.

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

  • ماذا يعني 1fr؟ — fr وحدة كسرية. 1fr يعني جزءًا واحدًا من المساحة المتاحة. repeat(3, 1fr) ينشئ ثلاثة أعمدة متساوية.
  • متى أستخدم Grid ومتى أستخدم Flexbox؟ — استخدم Grid للتخطيطات ثنائية الأبعاد (صفوف وأعمدة). استخدم Flexbox عند ترتيب العناصر في اتجاه واحد.
  • هل CSS Grid مدعوم في جميع المتصفحات؟ — نعم. CSS Grid مدعوم بالكامل في جميع المتصفحات الحديثة منذ 2017.