CSS Grid Area
خاصية grid-area مع grid في لغة CSS
سوف تتعلم في هذا الدرس خاصية grid-area في لغة CSS ووظيفيتها وكيفية استخدامها مع عناصر حاوية Grid وجميع القيم الخاصة بها.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Grid Area
خاصية grid-area مع grid في لغة CSS
</>
CSS Grid Area
خاصية grid-area مع grid في لغة CSS
تستخدم خاصية grid-area مع العناصر الداخلية لحاوية grid في لغة CSS لتحديد مكان وحجم العنصر داخل حاوية grid ولأختصار الخصائص التالية [grid-row-start-grid-column-start-grid-row-end-grid-column-end].
قيم خاصية grid-area في لغة CSS:
- grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end أربع قيم ونفصل بينهم بعلامة spash /.
- itemname تحديد أسم عنصر محدد داخل حاوية grid.
CSS grid-area syntax
طريقة كتابة خاصية grid-area في لغة CSS.
grid-area:value;
CSS grid-area-end values
قيم خاصية grid-area في لغة CSS.
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;
</>
CSS grid area values
خاصية grid-area مع القيم في لغة CSS
CSS grid area values
خاصية grid-area مع القيم في لغة CSS.
.one
{
grid-area: 2 / 1 / span 2 / span 3;
}
CSS grid area values four
خاصية grid-area مع القيم في لغة CSS.
.four
{
grid-area: 2 / 3 / 5 / 6;
}
</>
CSS grid area item name
خاصية grid-area مع القيمة item name في لغة CSS
CSS grid area item name
خاصية grid-area مع القيمة itme name في لغة CSS.
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: MyLeft; }
.item6 { grid-area: MyRight; }
.item7 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu MyLeft MyLeft MyRight MyRight MyRight'
'footer footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
