CSS

CSS Grid Template Columns
خاصية grid-template-columns في لغة CSS

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

التاريخ

09 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

912

المواضيع

24
الشروحات chevron_left CSS Grid Template Columns chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Grid Template Columns
خاصية grid-template-columns في لغة CSS

</> CSS grid template columns
خاصية grid-template-columns في لغة CSS

تستخدم خاصية grid-template-columns مع حاوية grid لتحديد (عدد - وعرض) العناصر الداخلية لحاوية grid في لغة CSS, لو تم ضبط ثلاث قيم بخاصية auto وعدد العناصر هي ستة عناصر فسوف يكون العرض علي صفين في كل صف ثلاثة عناصر إذا تم تحديد عدد العناصر لكل صف وعرض كل صف يكون ثلث المساحة.


قيم خاصية grid-template-columns في لغة CSS:

  • none هي القيمة الأفتراضية وتعرض العناصر علي هيئة صف به عمود أو عنصر واحد فقط وكل عنصر يكون عرضه بعرض الحاوية إذا كان غير محدد.
  • auto يتم توزيع مساحة الحاوية علي جميع العناصر الداخلية بالتساوي إذا كانت جميعها auto وإذا كانت العناصر الأخري بحجم ثابت بقيمة بكسل فالعنصر سيأخذ مساحة الحاوية المتبقية في حال عدم وجود fractions.
  • max-content يتم تحديد عرض العنصر بناء علي عرض المحتوي الداخلي لهذا العنصر.
  • min-content يتم تحديد عرض العنصر علي حسب أصغر عرض محتوي  الداخلي لهذا العنصر.
  • length يتم تحديد عرض العنصر بقيمة ثابتة بوحدات مختلفة كوحدة px.
CSS grid-template-columns syntax

طريقة كتابة خاصية grid-template-columns في لغة CSS.

grid-template-columns:value;
CSS grid template columns

قيم خاصية grid-template-columns في لغة CSS.

grid-template-columns:none|auto|max-content|min-content|length|initial|inherit;

</> CSS grid template columns none
خاصية grid-template-columns مع القيمة none في لغة CSS

تستخدم خاصية grid-template-columns في لغة CSS والقيمة none لعرض العناصر علي هيئة صف به عمود أو عنصر واحد فقط وكل عنصر يكون عرضه بعرض الحاوية إذا كان العرض غير ثابت وهي القيمة الأفتراضية.
CSS grid template columns none

خاصية grid-template-columnsمع القيمة none في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:none;
  background-color: #2196F3;
  padding: 10px;
}

</> CSS grid template columns auto
خاصية grid-template-columns مع القيمة auto في لغة CSS

تستخدم خاصية grid-template-columns في لغة CSS والقيمة auto لتوزيع مساحة الحاوية علي جميع العناصر الداخلية بالتساوي إذا كانت جميعها auto وإذا كانت العناصر الأخري بحجم ثابت بقيمة بكسل فالعنصر التي تحمل قيمة auto سيكون لها مساحة الحاوية المتبقية في حال عدم وجود fractions.

  • سيكون للعنصر مساحة بحجم محتواه الداخلي في حال وجود fractions تكون الأولوية ل fractions .
CSS grid template columns auto

خاصية grid-template-columns مع القيمة auto في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
CSS grid template columns two auto

خاصية grid-template-columns مع القيمة auto لعمل 2 عمود في كل صف في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:auto auto;
  background-color: #2196F3;
  padding: 10px;
}

</> CSS grid template columns length
خاصية grid-template-columns مع القيمة length في لغة CSS

تستخدم خاصية grid-template-columns في لغة CSS والقيمة length لعرض العناصر علي علي هيئة أعمدة محددة بقيم ثابتة بوحدة px أو نيب مئوية.
CSS grid template columns length with auto

خاصية grid-template-columnsمع القيمة length مع القيمة auto في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:100px 100px auto;
  background-color: #2196F3;
  padding: 10px;
}
CSS grid template columns length

خاصية grid-template-columnsمع القيمة length في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:100px 100px 100px;
  background-color: #2196F3;
  padding: 10px;
}

</> CSS grid template columns max content
خاصية grid-template-columns مع القيمة max-content في لغة CSS

تستخدم خاصية grid-template-columns في لغة CSS والقيمة max-content ليتم تحديد عرض العنصر علي حسب أكبر عرض لمحتوي الداخلي للعنصر.
CSS grid template columns max content

خاصية grid-template-columnsمع القيمة max-content في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:max-content max-content max-content;
  background-color: #2196F3;
  padding: 10px;
}

</> CSS grid template columns min content
خاصية grid-template-columns مع القيمة min-content في لغة CSS

تستخدم خاصية grid-template-columns في لغة CSS والقيمة min-content ليتم تحديد عرض العنصر علي حسب أصغر عرض لمحتوي الداخلي للعنصر.
CSS grid template columns min content

خاصية grid-template-columnsمع القيمة min-content في لغة CSS.

.grid-container
{
  display: grid;
  grid-template-columns:min-content min-content min-content;
  background-color: #2196F3;
  padding: 10px;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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