تستخدم خاصية 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;
}

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Grid Template Columns CSS