Jassif Team Institution

grid-area உடன் கிரிட் உருப்படிகளுக்குப் பெயரிடுதல்

CSS grid-template-areas என்பது ஒரு கிரிட் கொண்டெய்னர் பண்பு, மேலும் இது கிரிட் லேஅவுட்டுக்குள் பகுதிகளைக் குறிப்பிடுகிறது.

CSS grid-area பண்பைப் பயன்படுத்தி கிரிட் உருப்படிகளுக்குப் பெயரிடலாம், பின்னர் grid-template-areas பண்பில் பெயரைக் குறிப்பிடலாம்.

ஒவ்வொரு பகுதியும் apostrophes க்குள் வரையறுக்கப்பட்டுள்ளது. ஒவ்வொரு பகுதியிலும் உள்ள பெயரிடப்பட்ட கிரிட் உருப்படிகள் apostrophes க்குள் வரையறுக்கப்பட்டுள்ளன, ஒரு இடைவெளியால் பிரிக்கப்பட்டுள்ளன.

அடிப்படை பெயரிடல் எடுத்துக்காட்டு

.container {
  display: grid;
  grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
}

.item1 {
  grid-area: myHeader;
}

பெயரில்லாத உருப்படிகளுக்கு Period (.) பயன்படுத்துதல்

பெயரில்லாத கிரிட் உருப்படியைக் குறிக்க period அடையாளத்தை (.) பயன்படுத்தலாம்:

.container {
  display: grid;
  grid-template-areas: 'myHeader myHeader myHeader . .';
}

.item1 {
  grid-area: myHeader;
}

பல வரிசைகள் கொண்ட பெயரிடப்பட்ட பகுதிகள்

இரண்டு வரிசைகளை (இரண்டு பகுதிகள்) வரையறுக்க, இரண்டாவது வரிசையை மற்றொரு தொகுப்பு apostrophes க்குள் வரையறுக்கவும்:

.container {
  display: grid;
  grid-template-areas:
    'myHeader myHeader . . .'
    'myHeader myHeader . . .';
}

.item1 {
  grid-area: myHeader;
}

பயன்படுத்தத் தயாரான வலைப்பக்க வார்ப்புருவை உருவாக்குதல்

இங்கே, பயன்படுத்தத் தயாரான வலைப்பக்க வார்ப்புருவை உருவாக்க அனைத்து கிரிட் உருப்படிகளுக்கும் பெயரிடுவோம்:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'menu footer footer footer footer footer';
}

CSS கிரிட் பெயரிடல் பயிற்சி

கிரிட் உருப்படிகளுக்குப் பெயரிடுதல் பற்றிய உங்கள் அறிவை இந்தப் பயிற்சி சோதிக்கும்: