مولد CSS Grid
صمم الشبكة بصريًا واضبط الأعمدة والصفوف والفواصل وحدد المساحات وانسخ الكود
معاينة الشبكة
1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3
CSS المولد
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}كيفية استخدام مولد CSS Grid
صمم تخطيطات معقدة بضبط المعلمات والنقر على الخلايا، ثم انسخ الكود مباشرة.
1
حدد الأعمدة والصفوف
اختر عدد الأعمدة والصفوف وعدّل بنية الشبكة.
2
اضبط الأحجام والفواصل
حدد العرض والارتفاع بأي وحدة CSS واضبط الفاصل.
3
انقر لتحديد المساحات
حدد الخلايا لتصبح مساحات مسماة في CSS.
4
انسخ الكود
انقر «نسخ الكود» والصقه في ملف الأنماط.
لماذا تستخدم مولد CSS Grid؟
توقف عن كتابة الشبكة يدويًا. صمم بصريًا وعاين لحظيًا وانسخ كودًا جاهزًا.
تصميم بصري بالنقر
شاهد الشبكة أثناء بنائها وحدد الخلايا لمساحات مسماة.
دعم وحدات مرن
استخدم fr وpx و% وem وrem وauto وminmax() وrepeat() وغيرها.
إنشاء كود فوري
احصل على CSS جاهز بلا أخطاء صياغة، وانسخه مباشرة.
تسمية مساحات الشبكة
حدد الخلايا وسيكتب المولد grid-template-areas لك.
Frequently Asked Questions
نظام تخطيط ثنائي الأبعاد يرتب العناصر في صفوف وأعمدة، ومثالي للبنى المعقدة.
يسمي مناطق الشبكة ويربط العناصر بها لتصبح الشفرة مقروءة بدل أرقام الصفوف والأعمدة.
أي وحدة صالحة مثل fr وpx و% وem وrem وauto وminmax() وrepeat().
نعم، مجانية وبلا تسجيل أو حدود استخدام.