مولّد CSS Grid
محرّر CSS Grid مرئي بصفوف × أعمدة (أي قيمة مسار: fr، px، %، auto، minmax، repeat)، مسافات صفوف وأعمدة مستقلة، مناطق Grid مسمّاة بالنقر للتلوين، justify/align للعناصر والمحتوى، 6 قوالب جاهزة ومعاينة مباشرة. الناتج CSS عادي (بمحدّدات .area) أو فئات Tailwind بقيمة حرة.
Everything runs in your browser. Nothing is uploaded.
كيفية استخدام مولّد css grid
- اختر قالبًا (12 عمود، Holy Grail، Dashboard، Bento، Gallery، Card row) أو حدّد الصفوف والأعمدة بنفسك.
- حرّر أي مسار بقيمة CSS صالحة: 1fr، 200px، minmax(120px, 1fr)، repeat(auto-fill, minmax(180px, 1fr)).
- اضبط مسافات الصفوف/الأعمدة بشرائط التمرير.
- فعّل 'مناطق Grid مسمّاة' لتلوين الخلايا بأسماء — اختر لونًا وانقر الخلايا.
- اضبط justify/align للعناصر والمحتوى، وانسخ CSS أو Tailwind.
الأسئلة الشائعة
ما هي grid-template-areas؟
طريقة لتخطيط Grid بإعطاء كل خلية اسمًا، ثم تعيين العناصر الفرعية لتلك الأسماء عبر `grid-area`. ممتازة للترويسة/الشريط الجانبي/المحتوى/التذييل.
ما الفرق بين fr و auto و minmax؟
`fr` يقسّم المساحة المتبقية بين المسارات. `auto` يحجم حسب المحتوى. `minmax(min, max)` يقيّد المسار بين قيمتين — مع `repeat(auto-fill, ...)` يولّد grids متجاوبة.
هل يغطي إخراج Tailwind كل شيء؟
بأفضل ما يمكن: الأنماط البسيطة (grid-cols-N، gap، items-X) تستخدم فئات مدمجة؛ المسارات المعقّدة تنزل إلى محدّدات بقيمة حرة.
لماذا لا تعمل `gap` في الشبكة على إصدارات Safari الأقدم؟
`gap` لـ CSS Grid مدعومة منذ Safari 10.1 (2017)، و`gap` لـ Flexbox منذ Safari 14.1 (2021). إن كنت تدعم iOS 13 أو أقدم، استخدم `grid-row-gap` و`grid-column-gap` كبديل (تعمل منذ Safari 10)، واستخدم margins على عناصر flex بدلاً من `gap`.