انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 97
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
4
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,598
محتوى الدرس
في هذا الدرس 4تصفّح المواضيع

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.

HTML 
grid-template:value;

CSS grid-template values

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

HTML 
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.

HTML 
.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.

HTML 
.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.

HTML 
.grid-container {
  display: grid;
  grid-template:
    'one one one . .'
    'one one one . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…