شرح صفوف ومحتوى الفقرة
عن طريق تحديد اسم لكل عنصر يمكن تحديد كل عنصر يشغل مساحة عدد من الخلايا أوعدد أعمدة مع grud في لغة CSS.
CSS grid area item name
خاصية grid-area مع القيمة itme name في لغة CSS.
HTML
.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;
}