تصميم / التخطيط

مولّد CSS Grid (منشئ مرئي لـ grid-template-areas)

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

مولّد CSS Grid (منشئ مرئي لـ grid-template-areas): تُكتب أحجام المسارات أثناء إدخالها، مثل 200px 1fr 1fr، وتتحول الأحجام المتكررة إلى repeat(). تصبح كل منطقة اسمًا في grid-template-areas، مع نقطة للخلايا الفارغة، وقاعدة تضع العنصر باستخدام grid-area. يجب أن تكون المناطق مستطيلة وألا تتداخل، وفقًا لمتطلبات CSS؛ ويُحفظ التخطيط في هذا المتصفح. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.

الفئة
أدوات المطورين
مرات التشغيل
في المتصفح
التكلفة
مجاني · بلا تسجيل
التوفر
جاهز للاستخدام
مولّد شبكة CSSمعالجة محلية

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

اسحب عبر الخلايا لإنشاء منطقة، ويمكن أن تمتد عبر عدة صفوف وأعمدة. أدخل أحجام المسارات مثل 1fr أو 200px أو auto أو minmax(100px, 1fr).

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

امنح كل عنصر فرعي الفئة الخاصة بمنطقته. تبقى الخلايا المعروضة كنقطة فارغة.

المناطق المسماة

كل سلسلة في grid-template-areas تمثل صفًا واحدًا، وكل كلمة تمثل خلية واحدة: "header header" "sidebar main" تضع العنوان عبر العمودين. ويملأ العنصر الفرعي الذي يحمل grid-area: main كل خلية تحمل الاسم main. لا يلزم أن تتطابق الأسماء مع أسماء الفئات، لكن إبقاءها متطابقة يجعل CSS أسهل قراءة.

أحجام المسارات الشائعة

يحافظ minmax(200px, 1fr) على عرض العمود بحيث لا يقل عن 200 px، مع السماح له بالتمدد؛ وتلائم auto المحتوى؛ وينشئ repeat(auto-fill, minmax(12rem, 1fr)) أكبر عدد ممكن من الأعمدة، وهو نمط مناسب لشبكات البطاقات. ويمكن جعل التباعد مرنًا باستخدام مولّد CSS clamp.

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

  1. اختر عدد الأعمدة والصفوف، واكتب أحجامها.
  2. اسحب عبر الخلايا لإنشاء المناطق، ثم أعد تسميتها.
  3. انسخ CSS، وامنح كل عنصر فرعي الفئة الخاصة بمنطقته.

الخصوصية والقيود

يُنشأ التخطيط في المتصفح.

أدوات ذات صلة

CSS clamp()ظل الصندوقمنسّق CSSFlexboxمسار القص

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

ماذا تعني fr؟

جزء من المساحة المتاحة: يمنح 1fr 2fr العمود الثاني ضعف عرض العمود الأول، بعد طرح الأحجام الثابتة والفجوات.

لماذا لا يمكن أن تتداخل المناطق أو تكون على شكل حرف L؟

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

كيف أجعل التخطيط متجاوبًا؟

استخدم CSS المُنشأ للتخطيط العريض، وأعد تعريف grid-template-columns وgrid-template-areas داخل استعلام وسائط للشاشات الضيقة.

أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا