CSS Grid Template
خاصية grid-template مع grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-template في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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
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
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
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
