مولد CSS Grid

يُعد تعريف grid-template-areas واحدًا من أكثر أجزاء CSS قابلية للقراءة، ولكن فقط بعد أن يوجد — الوصول إليه يدويًا يعني عد النصوص المقتبسة ومطابقة أطوال الصفوف، وخلية واحدة غير متطابقة تكسر التخطيط بالكامل بصمت. يحول هذا المولد ذلك إلى معالجة مباشرة: حدد عدد الأعمدة والصفوف، واكتب اسمًا في أي خلية من الشبكة الحية، وستندمج الأسماء المتطابقة في منطقة مسماة واحدة تلقائيًا.

تحت الغطاء، تصبح كل خلية تتركها فارغة نقطة في نص grid-template-areas المُنشأ، وتصبح كل خلية تسميها جزءًا من مستطيل ذلك الاسم. يسمح CSS فقط لمنطقة مسماة أن تشغل كتلة مستطيلة واحدة نظيفة، لذا تتحقق الأداة من ذلك أثناء كتابتك وتخبرك بالضبط عندما لا يشكل الاسم مستطيلًا صالحًا بعد — بدلًا من إنتاج CSS سيرفضه المتصفح بصمت.

يبدأ كل من column-gap و row-gap افتراضيًا من 8px ويندمجان في سطر gap واحد عندما يتطابقان، وتعكس شبكة المعاينة الحية دائمًا مسارات grid-template-columns و grid-template-rows لديك، بما في ذلك الأعمدة الثابتة بالبكسل من إعداد مسبق مثل قضبان الكأس المقدسة الجانبية بعرض 200px. تغطي المخرجات القابلة للنسخ كلا الجانبين: كتلة CSS جاهزة لملف الأنماط الخاص بك وهيكل HTML مطابق مع عنصر grid-area div لكل منطقة مسماة.

Grid و flexbox يحلان مشاكل تخطيط مختلفة، وأداة css-flexbox-generator على هذا الموقع هي نقطة انطلاق أفضل للتخطيطات أحادية البعد — صف واحد أو عمود واحد من العناصر المرنة مثل شريط تنقل أو مجموعة بطاقات. استعمل مولد الـ grid هذا بدلًا من ذلك عندما تحتاج تحكمًا ثنائي البعد، أو صفوف وأعمدة محددة، أو مناطق مسماة مثل header/nav/main/footer؛ غالبًا ما تنتهي الأداتان في نفس الصفحة، grid لهيكل الصفحة و flexbox داخل أجزائها. مثل كل أداة في هذا الموقع، تعمل بالكامل في متصفحك — دون رفع ملفات، ودون حساب.