CSS

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

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

التاريخ

21 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

944

المواضيع

24
الشروحات chevron_left CSS Column Count chevron_left CSS
CSS Flex Box keyboard_arrow_down

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

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

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


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

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

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

column-count:value;
CSS column-count values

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

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.

.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.

.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;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.