انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 121
دورة لغة CSS

خاصية column-count في لغة CSSCSS Column Count

سوف تتعلم في هذا الدرس خاصية column-count في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
4
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,019
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

CSS column count خاصية column-count في لغة CSS

تستخدم خاصية column-count في لغة CSS لتحديد عدد الأعمدة لمحتوي الداخلي للعناصر التي تقوم بتقسيم الصفحة مثل [div,section] داخل صفحة HTML.


قيم خاصية column-count في لغة CSS:

  • auto هي القيمة الأفتراضية والأعمدة داخل العنصر تتحدد بواسطة خصائص أخري أو بدون تحديد.
  • number وهو رقم لتحديد أو تقسيم محتوي العنصر الداخلي لمجموعة أعمده أو عمود واحد.

CSS column-count syntax

طريقة كتابة خاصية column-count في لغة CSS.

HTML 
column-count:value;

CSS column-count values

قيم خاصية column-count في لغة CSS.

HTML 
column-count:number|auto|initial|inherit;

CSS column count auto خاصية column-count مع القيمة auto في لغة CSS

تستخدم خاصية column-count في لغة CSS مع القيمة auto وتكون الأعمدة داخل العنصر تتحدد بواسطة خصائص أخري أو بدون تحديد وهي القيمة الأفتراضية.
جرّب بنفسك

CSS column count auto

خاصية column-gap مع القيمة length في لغة CSS.

HTML 
.item
{
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  column-count:auto;
}
جرّب بنفسك

CSS column count number خاصية column-count مع القيمة number في لغة CSS

تستخدم خاصية column-count في لغة CSS مع القيمة number وهو رقم لتحديد أو تقسيم محتوي العنصر الداخلي لمجموعة أعمده أو عمود واحد.
جرّب بنفسك

CSS column count number

خاصية column-count مع القيمة number في لغة CSS.

HTML 
.item
{
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  column-count:3;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…