شرح صفوف ومحتوى الفقرة
تقوم شبكات البطاقات الاحترافية على توزيع واضح للأدوار: تتولى خاصية gap ضبط الفواصل الداخلية بين البطاقات المتجاورة، بينما تتولى خاصية padding على الحاوية نفسها إنشاء الإطار الداخلي المحيط بالشبكة من جوانبها الأربعة.
على عكس وضع margin: 8px لكل بطاقة—والذي ينتج مسافة مضاعفة قدرها 16px بين البطاقات مقابل 8px فقط عند الجدار—فإن الجمع بين gap: 16px و padding: 16px يمنحك توازناً هندسياً متطابقاً بلا معادلات معقدة:
CSS
.dashboard-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 16px;
}