CSS - RWD Grid View شبكة التصميم المتجاوب

CSS - شبكة التصميم المتجاوب (Responsive Grid View)

🔸 شبكة التصميم (Grid View) تُستخدم في التصميم المتجاوب لتقسيم الصفحة إلى أعمدة وصفوف بحيث تتكيف تلقائيًا مع حجم الشاشة. الفكرة تقوم على تقسيم العرض الكلي للصفحة إلى أعمدة (غالبًا 12 عمود)، ثم تخصيص عدد معين من الأعمدة لكل عنصر.

🔹 تخطيط بسيط باستخدام float

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}

/* الشاشات الكبيرة */
@media only screen and (min-width: 600px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

🧪 مثال عملي على 3 أعمدة

<div class="row">
  <div class="col-4"><h2>عمود 1</h2><p>محتوى هنا</p></div>
  <div class="col-4"><h2>عمود 2</h2><p>محتوى هنا</p></div>
  <div class="col-4"><h2>عمود 3</h2><p>محتوى هنا</p></div>
</div>

📌 في الشاشة الصغيرة تكون الأعمدة فوق بعضها، وفي الكبيرة تظهر بجانب بعضها بنسبة 33.33% لكل عمود.

📌 ملاحظات هامة

• التقسيم إلى 12 عمود هو شائع ويسهل الحساب (100 ÷ 12 = 8.33%).
• يُفضل كتابة box-sizing: border-box; لضمان حساب padding داخل العرض الكلي.
• يمكن استخدام Flexbox أو CSS Grid بدلاً من float لتصميم أكثر مرونة.