CSS Column Count
خاصية column-count في لغة CSS
سوف تتعلم في هذا الدرس خاصية column-count في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
21 نوفمبر 2022
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
1190
المواضيع
24
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; }