التصميم
مولد CSS Grid
بناء تخطيطات CSS Grid بشكل مرئي.
إعدادات تخطيط مسبقة (10)
اسحب عبر الخلايا لرسم مستطيل، أو انقر خلية واحدة كل مرة. يجب أن تبقى كل منطقة مسماة مستطيلة.
معاينة حية
أحادي البُعد: مولد CSS Flexbox.
بناء شبكة CSS بمناطق مسماة
ارسم شبكة حروف لمناطق القالب، أو اختر إعدادًا مسبقًا. تظهر المعاينة كل منطقة بصبغة مميزة.
الأسئلة الشائعة
ما grid-template-areas؟
طريقة لتسمية مناطق التخطيط (header, sidebar, main…) ووضع العناصر حسب الاسم بدلًا من أرقام الخطوط. انقر على الخلايا أدناه لتلوينها بأحرف المناطق — يتم تحديث CSS مباشرة.
هل يمكنني البدء من إعداد مسبق؟
نعم — تحمّل عشرة إعدادات تخطيط مسبقة، منها Holy grail وdashboard وmagazine وapp shell، المناطق المسماة بنقرة واحدة.
هل يتم تحميل أي شيء؟
لا. يتم إنشاء CSS بالكامل في متصفحك.
آخر تحديث: