المساحة الخاصة بالشبكة الخاصة بـ CSS

1
2
3
4
5
6
7
8

جرب بنفسك

مكون شبكة

لجعل عنصر HTML يعمل كمكون شبكة، يجب أن تُضبط الخاصية على عرض يُضبط الخاصية على grid أو inline-grid.

مكون الشبكة هو العناصر الموضوعة داخل الأعمدة والأسطر.

خصائص grid-template-columns

grid-template-columns يحدد الخاصية عدد الأعمدة في ترتيب الشبكة، ويمكنه أيضًا تحديد عرض كل عمود.

قيمته هي قائمة منفصلة بالفضاء، حيث يعين كل قيمة طول العمود المقابل:

إذا كنت ترغب في أن تحتوي ترتيب الشبكة على أربعة أعمدة، فحدد عرض هذه الأعمدة؛ إذا كان يجب أن يكون كل عمود له نفس العرض، فحدد 'auto'.

مثال

أنشئ شبكة تحتوي على أربعة أعمدة:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

جرب بنفسك

ملاحظة:إذا كان هناك أكثر من 4 عناصر في شبكة الأعمدة الـ 4، فإن الشبكة ستضيف تلقائيًا صفًا جديدًا وتضيف هذه العناصر فيه.

grid-template-columns يمكن استخدام الخاصية أيضًا لتحديد حجم الأعمدة (العرض).

مثال

حدد حجم هذه الأعمدة الـ 4:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

جرب بنفسك

خصائص grid-template-rows

grid-template-rows يحدد الخاصية ارتفاع الأعمدة.

1
2
3
4
5
6
7
8

قيمته هي قائمة منفصلة بالفضاء، حيث يعين كل قيمة ارتفاع السطر المقابل:

مثال

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

جرب بنفسك

خصائص justify-content

justify-content يستخدم الخاصية لتحديد تنسق الشبكة داخل العنصر الحامل.

1
2
3
4
5
6
7
8

ملاحظة:عرض الشبكة يجب أن يكون أقل من عرض العنصر الحامل، حتى يتمكن خاصية justify-content من العمل.

مثال

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  justify-content: space-around;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  justify-content: space-between;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  justify-content: center;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  justify-content: start;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  justify-content: end;
}

جرب بنفسك

خصائص تنسق المحتوى

تنسق المحتوى يستخدم الخاصية للتحجيم العمودي للشبكة داخل المساحة.

1
2
3
4
5
6
7
8

ملاحظة:يجب أن تكون الارتفاع الإجمالي للشبكة أقل من ارتفاع الم_AREA، حتى يتمكن خاصية align-content من العمل.

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

جرب بنفسك

مثال

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

جرب بنفسك