وحدة تخطيط الشبكة CSS

الرأس
القائمة
الرئيسي
اليمين
القاعدة

جرب بنفسك

تخطيط الشبكة

يقدم مodule التخطيط الشبكي لـ CSS (CSS Grid Layout Module) نظام تخطيط شبكي يعتمد على السطور والعمود، مما يجعل تصميم صفحات الويب أسهل دون الحاجة إلى استخدام التدفق أو التوضيح.

دعم المتصفح

يدعم جميع المتصفحات الحديثة خصائص الشبكة.

57.0 16.0 52.0 10 44

عناصر الشبكة

تصميم الشبكة يتكون من عنصر родوي وواحد أو أكثر من العناصر الفرعية.

مثال

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

جرب بنفسك

خصائص العرض

عندما يكون HTML العنصر display الخصائص يتم ضبطها إلى grid أو inline-grid عندما يكون HTML العنصر

مثال

.grid-container {}}
  display: grid;
}

جرب بنفسك

مثال

.grid-container {}}
  display: inline-grid;
}

جرب بنفسك

جميع العناصر المباشرة التي تكون أطفالًا للوحدة الشبكية ستكون تلقائيًا مشاريع شبكية.

عمود الشبكة (Grid Columns)

الخط العمودي للمكونات الشبكية يُدعى العمود.

صفوف الشبكة (Grid Rows)

الخط الأفقي للمكونات الشبكية يُدعى السطر.

فراغات الشبكة (Grid Gaps)

المسافة بين كل عمود/سطر تُسمى الفراغ.

يمكنك تعديل حجم المسافات باستخدام أحد الخاصيات التالية:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

مثال

grid-column-gap تُستخدم الخاصية لضبط مسافات العمود:

.grid-container {}}
  display: grid;
  grid-column-gap: 50px;
}

جرب بنفسك

مثال

grid-row-gap تُستخدم الخاصية لضبط مسافات السطور:

.grid-container {}}
  display: grid;
  grid-row-gap: 50px;
}

جرب بنفسك

مثال

grid-gap الخصائص هي اختصارات لخصائص grid-row-gap و grid-column-gap:

.grid-container {}}
  display: grid;
  grid-gap: 50px 100px;
}

جرب بنفسك

مثال

grid-gap الخصائص يمكن استخدامها أيضًا لضبط مسافات السطر والعمود إلى قيمة واحدة:

.grid-container {}}
  display: grid;
  grid-gap: 50px;
}

جرب بنفسك

خطوط الشبكة (Grid Lines)

الخطوط بين الصفوف تسمى خطوط الصفوف (column lines).

الخطوط بين الأعمدة تسمى خطوط الأعمدة (row lines).

عند وضع مشروع الشبكة داخل صندوق الشبكة، استخدم أرقام الأعمدة:

مثال

ضع مشروع الشبكة في الخط 1، وأكملة في الخط 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

جرب بنفسك

مثال

ضع مشروع الشبكة في الخط 1، وأكملة في الخط 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

جرب بنفسك