🔲 مولد CSS Grid — تخطيط شبكي
مولد CSS Grid البصري: حدد عدد الأعمدة والصفوف والفجوة، رؤية معاينة فورية، وانسخ كود grid-template-columns/rows.
📚 عن هذه الأداة
CSS Grid يقسم الحاوية إلى شبكة ثنائية الأبعاد. grid-template-columns يحدد الأعمدة، grid-template-rows يحدد الصفوف، gap يفصل بينها. الوحدة fr تعني "جزء" — repeat(3, 1fr) يساوي 3 أعمدة متساوية.
❓ أسئلة شائعة
ما هو fr في Grid؟
وحدة "جزء" — تقسم المساحة المتاحة. 1fr 2fr يعني عمود ثلث ثم عمود ثلثين.
كيف أمدد عنصراً عبر عدة أعمدة؟
استخدم grid-column: span 2 لتمتد عبر عمودين.
متى أستخدم Grid بدل Flex؟
Grid لتخطيطات صفحة كاملة (header/sidebar/main/footer)، Flex لمكونات صغيرة (شريط أدوات، بطاقة).
هل Grid يدعم RTL؟
نعم. أضف direction: rtl على الحاوية أو على html لانعكاس الأعمدة.