CSS

CSS Grid Template
خاصية grid-template مع grid في لغة CSS

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

التاريخ

20 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

807

المواضيع

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

CSS Grid Template
خاصية grid-template مع grid في لغة CSS

</> CSS Grid Template
خاصية grid-template مع grid في لغة CSS

تستخدم خاصية grid-template مع العناصر الداخلية لحاوية grid في لغة CSS لتختصر ثلاث خصائص وهم [grid-template-rows-grid-template-columns-grid-template-areas] في خاصية واحدة فقط.


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

  • none وهي القمية الأفتراضية ويكون الأعمدة والصفوف ليس لها حجم محدد.
  • grid-template-rows / grid-template-columns تحديد حجم للصفوف والأعمدة.
  • grid-template-areas تحديد مساحات داخل حاوية grid عن طريق تسمية العناصر عن طريق تحديد أسماء.
CSS grid-template syntax

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

grid-template:value;
CSS grid-template values

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

grid-template:none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

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

تستخدم خاصية grid-template في لغة CSS مع حاوية grid مع القيمة none وتكون الأعمدة والصفوف ليس لها حجم محدد وهي القمية الأفتراضية.
CSS grid template none

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

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

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

تستخدم خاصية grid-template في لغة CSS مع حاوية grid مع القيمة none لتحديد حجم محدد للصفوف والأعمدة.
CSS grid template rows columns

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

.grid-container
{
  display: grid;
  grid-template:200px 100px/auto auto 100px;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

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

تستخدم خاصية grid-template في لغة CSS مع حاوية grid مع القيمة grid-template-areas لتحديد مساحات داخل حاوية grid عن طريق تسمية العناصر عن طريق تحديد أسماء.
CSS grid template with areas

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

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

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

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