مولّد شبكة CSS (Grid)

كيف يعمل؟

يتيح CSS Grid تعريف شبكة ثنائية الأبعاد بخاصية واحدة، على عكس Flexbox الذي يدير محورًا واحدًا فقط في كل مرة. يولّد هذا المولّد grid-template-columns وgrid-template-rows بأعمدة وصفوف متساوية الحجم (1fr)، وهو عملي لمعرض صور أو لوحة تحكم بنقرة واحدة.

ماذا يعني « 1fr » في الكود المُولَّد؟

وحدة fr (كسر) توزّع المساحة المتاحة بالتساوي بين الأعمدة أو الصفوف؛ لذا فإن repeat(3, 1fr) ينشئ ثلاثة أعمدة متساوية العرض تتقاسم كل مساحة الحاوية.

هل يمكنني الحصول على أعمدة بأحجام مختلفة؟

نعم، يوفّر هذا المولّد نقطة بداية بسيطة بأعمدة متساوية؛ ويمكنك بعد ذلك تعديل grid-template-columns يدويًا لاستخدام قيم ثابتة أو متنوعة مثل 200px 1fr 2fr.

معالجة محلية 100%: يتم إنشاء الكود بالكامل داخل متصفحك عبر WebAssembly.