لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

مولد CSS Grid (مرئي)

مطورنص

إعلان · يزيل؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · يزيل؟

مرشد

مولد CSS Grid

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

كيف تستعمل

قم بتعيين عدد الأعمدة والصفوف، ثم انقر على خلايا الشبكة لتعيين مناطق مسماة (مثل الرأس، الشريط الجانبي، المحتوى الرئيسي، التذييل). الخلايا التي تحمل نفس الاسم يتم تمييزها بنفس اللون. يتم تحديث إخراج CSS مباشرة أثناء تصميم التخطيط الخاص بك. استخدم أزرار الإعداد المسبق للتخطيطات الشائعة مثل Holy Grail أو Dashboard.

سمات

محرر شبكة تفاعلي – انقر فوق الخلايا لتعيين مناطق مسماة مع تصور ملون تلقائي
إخراج CSS مباشر – كود جاهز للإنتاج مع grid-template-areas، grid-template-columns، grid-template-rows، والفجوة
معاينة مباشرة – شاهد تخطيطك معروضًا بمناطق مسماة ملونة في الوقت الفعلي
تخطيطات مسبقة الضبط – تخطيطات Holy Grail، Dashboard، Blog، و Portfolio بنقرة واحدة
تحجيم مرن – تحديد أحجام الأعمدة والصفوف باستخدام وحدات fr، px، أو النسبة المئوية
CSS لعنصر فرعي – ينشئ قواعد grid-area لكل منطقة مسماة تلقائيًا
عميل 100% – تتم جميع عمليات إنشاء التخطيط في متصفحك

إعلان · يزيل؟

 التعليمات

ما هو CSS Grid وكيف يختلف عن Flexbox؟

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

تمثل وحدة fr (جزء) جزءًا من المساحة المتاحة في حاوية الشبكة. 1fr 2fr تعني أن العمود الثاني يحصل على ضعف مساحة العمود الأول. إنها مشابهة لـ flex-grow في Flexbox ولكنها مصممة خصيصًا لمسارات الشبكة. تقوم وحدات fr بتوزيع المساحة المتبقية تلقائيًا بعد تخصيص المسارات ذات الحجم الثابت (px، em).
ما هو grid-template-areas ولماذا نستخدم المناطق المسماة؟

يتيح لك grid-template-areas تحديد تخطيطك باستخدام سلاسل مسماة تمثل البنية الشبكية بصريًا في CSS الخاص بك. بدلاً من وضع العناصر حسب أرقام الخطوط (grid-column: 1 / 3)، فإنك تعينها بالاسم (grid-area: header). تبدو CSS الناتجة مثل نسخة ASCII art من تخطيطك، مما يجعلها توثيقًا ذاتيًا وأسهل في الصيانة.
ما هو تخطيط Holy Grail في تصميم الويب؟

تخطيط Holy Grail هو هيكل صفحة ويب كلاسيكي مع رأس يمتد بعرض كامل، وجسم بثلاثة أعمدة (شريط جانبي أيسر، محتوى رئيسي، شريط جانبي أيمن)، وتذييل بعرض كامل. كان تحقيقه صعبًا تاريخيًا باستخدام CSS floats وتم استدعاؤه Holy Grail لأن التنفيذ النظيف كان صعب المنال. CSS Grid يجعل الأمر سهلاً.