CSS

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

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

التاريخ

21 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1190

المواضيع

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

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
عدد التقييمات