مولد تخطيط CSS Grid

CSS Grid أداة قوية للتخطيطات ثنائية الأبعاد. من تخطيطات الجرائد إلى لوحات التحكم المعقدة، Grid يجعل كل شيء ممكناً.

Grid مقابل Flexbox

• Grid: تخطيط ثنائي الأبعاد (صفوف وأعمدة معاً)
• Flexbox: تخطيط أحادي البعد (صف أو عمود)
• استخدامهما معاً هو الأمثل

خصائص Grid الأساسية

• grid-template-columns: تعريف الأعمدة (repeat(3, 1fr))
• grid-template-rows: تعريف الصفوف
• gap: المسافة بين الصفوف والأعمدة
• grid-column/row: النطاق الذي يشغله العنصر

وحدة fr

fr تمثل كسراً من المساحة المتاحة. grid-template-columns: 1fr 2fr 1fr تعني 25%، 50%، 25%.

Grid متجاوب

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

هذا النمط ينشئ شبكة متجاوبة تلقائياً دون media queries.