مولّد CSS Grid

أنشئ تخطيطات CSS Grid بصرياً. حدد الصفوف والأعمدة والفجوات وانسخ شفرة CSS وHTML الناتجة. يدعم وحدات fr وpx وauto.

الأعمدة: 3

الصفوف: 3

المسافة بين الأعمدة: 8px

المسافة بين الصفوف: 8px

قالب الأعمدة

معاينة

CSS

الميزات

إعداد الصفوف والأعمدة

تغيير الحجم بالسحب

دمج الخلايا

التحكم في التباعد

توليد CSS و HTML

طريقة الاستخدام

1. حدد عدد الصفوف والأعمدة.

2. اضبط ارتفاعات الصفوف وعروض الأعمدة (fr، px، auto).

3. حدد فجوة الشبكة.

4. انسخ شفرة CSS وHTML المولّدة.

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

يرتّب CSS Grid المحتوى في صفوف وأعمدة في الوقت نفسه، ما يجعله الخيار الطبيعي للمعارض ولوحات المعلومات وهياكل الصفحات. يُعدّ هذا المولّد حاوية شبكة بصريًا: اختر عدد الأعمدة والصفوف التي تحتاجها، والفجوة بينها، وطريقة تقاسم الأعمدة للمساحة — أجزاء متساوية بـ 1fr، أو حجم تلقائي، أو minmax(0, 1fr) لمنع المحتوى الطويل من توسيع عمود، أو مسارات ثابتة بعرض 100px. تُظهر المعاينة كيف تتدفق العناصر في المسارات، وتُكتب CSS باستخدام repeat() لنتيجة مختصرة ومقروءة. انسخها كنقطة انطلاق، ثم ضع العناصر الفردية باستخدام grid-column وgrid-row في ورقة الأنماط الخاصة بك.

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

ماذا تعني الوحدة fr؟

‏fr تمثّل جزءًا من المساحة الحرة في حاوية الشبكة. ثلاثة أعمدة بقيمة 1fr تتقاسم المساحة بالتساوي، بينما 2fr 1fr تمنح العمود الأول ضعف عرض الثاني.

لماذا أستخدم minmax(0, 1fr) بدلًا من 1fr؟

لا يستطيع مسار 1fr أن ينكمش إلى ما دون الحد الأدنى لحجم محتواه، فقد تمطّ كلمة طويلة أو جدول عريض العمود. أما minmax(0, 1fr) فتسمح للعمود بالانكماش، فتبقى الأعمدة المتساوية متساوية فعلًا.

كيف أجعل الشبكة متجاوبة؟

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

كيف أجعل عنصرًا يمتد على عدة أعمدة؟

أضف grid-column: span 2 إلى العنصر ليغطي عمودين، أو grid-column: 1 / -1 ليمتد على العرض الكامل. وتعمل grid-row بالطريقة نفسها مع الصفوف.

ما الفرق بين gap وcolumn-gap وrow-gap؟

‏column-gap تحدد المسافة بين الأعمدة، وrow-gap المسافة بين الصفوف، وgap اختصار لكليهما. تضيف الفجوات مسافة بين المسارات فقط، لا حول الحافة الخارجية للشبكة.