CSS Grid Items

CSS கிரிட் உருப்படிகளைக் கற்றுக்கொள்ளுங்கள்

CSS கிரிட் உருப்படிகள்

ஒரு கிரிட் கொண்டெய்னர் ஒன்று அல்லது அதற்கு மேற்பட்ட கிரிட் உருப்படிகளைக் கொண்டுள்ளது.

கிரிட் கொண்டெய்னரின் அனைத்து நேரடி குழந்தை உறுப்புகளும் தானாகவே கிரிட் உருப்படிகளாக மாறும்.

கீழே ஐந்து கிரிட் உருப்படிகளைக் கொண்ட கிரிட் கொண்டெய்னர் உள்ளது:

1
2
3
4
5

CSS கிரிட் உருப்படி அளவிடல்/விரிவாக்கம்

ஒரு கிரிட் உருப்படி பல நெடுவரிசைகள் அல்லது வரிசைகளில் விரியலாம்.

ஒரு கிரிட் உருப்படி எங்கு தொடங்கும் மற்றும் எங்கு முடியும் என்பதை பின்வரும் பண்புகளைப் பயன்படுத்தி குறிப்பிடலாம்:

grid-column-start

கிரிட் உருப்படி எந்த நெடுவரிசை-கோட்டில் தொடங்கும் என்பதைக் குறிப்பிடுகிறது

grid-column-end

கிரிட் உருப்படி எந்த நெடுவரிசை-கோட்டில் முடியும் என்பதைக் குறிப்பிடுகிறது

grid-column

grid-column-start மற்றும் grid-column-end பண்புகளுக்கான சுருக்கப் பண்பு

grid-row-start

கிரிட் உருப்படி எந்த வரிசை-கோட்டில் தொடங்கும் என்பதைக் குறிப்பிடுகிறது

grid-row-end

கிரிட் உருப்படி எந்த வரிசை-கோட்டில் முடியும் என்பதைக் குறிப்பிடுகிறது

grid-row

grid-row-start மற்றும் grid-row-end பண்புகளுக்கான சுருக்கப் பண்பு

கிரிட்டில் நெடுவரிசைகளுக்கிடையே உள்ள கோடுகள் நெடுவரிசை-கோடுகள் என்றும், வரிசைகளுக்கிடையே உள்ள கோடுகள் வரிசை-கோடுகள் என்றும் அழைக்கப்படுகின்றன.

கிரிட் கொண்டெய்னரில் ஒரு கிரிட் உருப்படியை வைக்கும்போது கோடு எண்களைக் குறிப்பிடலாம்.

நெடு-கோடு 2
நெடு-கோடு 3
வரிசை-கோடு 2

CSS grid-column-start மற்றும் grid-column-end

grid-column-start பண்பு கிரிட் உருப்படி எந்த நெடுவரிசை-கோட்டில் தொடங்கும் என்பதைக் குறிப்பிடுகிறது.

grid-column-end பண்பு கிரிட் உருப்படி எந்த நெடுவரிசை-கோட்டில் முடியும் என்பதைக் குறிப்பிடுகிறது.

எடுத்துக்காட்டு

முதல் கிரிட் உருப்படி நெடுவரிசை-கோடு 1 இல் தொடங்கி, நெடுவரிசை-கோடு 3 இல் முடியட்டும்:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

முடிவு:

1
2
3
4
5

CSS grid-column பண்பு

grid-column பண்பு grid-column-start மற்றும் grid-column-end பண்புகளுக்கான சுருக்கப் பண்பாகும்.

எடுத்துக்காட்டு

முதல் கிரிட் உருப்படி நெடுவரிசை-கோடு 1 இல் தொடங்கி, அது 2 நெடுவரிசைகளை விரியட்டும்:

.item1 {
  grid-column: 1 / span 2;
}

முடிவு:

1
2
3
4
5

CSS grid-row-start மற்றும் grid-row-end

grid-row-start பண்பு கிரிட் உருப்படி எந்த வரிசை-கோட்டில் தொடங்கும் என்பதைக் குறிப்பிடுகிறது.

grid-row-end பண்பு கிரிட் உருப்படி எந்த வரிசை-கோட்டில் முடியும் என்பதைக் குறிப்பிடுகிறது.

எடுத்துக்காட்டு

முதல் கிரிட் உருப்படி வரிசை-கோடு 1 இல் தொடங்கி, வரிசை-கோடு 3 இல் முடியட்டும்:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

முடிவு:

1
2
3
4
5

CSS grid-row பண்பு

grid-row பண்பு grid-row-start மற்றும் grid-row-end பண்புகளுக்கான சுருக்கப் பண்பாகும்.

எடுத்துக்காட்டு

முதல் கிரிட் உருப்படி வரிசை-கோடு 1 இல் தொடங்கி, அது 2 வரிசைகளை விரியட்டும்:

.item1 {
  grid-row: 1 / span 2;
}

முடிவு:

1
2
3
4
5

grid-column மற்றும் grid-row ஆகியவற்றை இணைத்தல்

இங்கே grid-column மற்றும் grid-row பண்புகள் இரண்டையும் பயன்படுத்தி ஒரு கிரிட் உருப்படி நெடுவரிசைகள் மற்றும் வரிசைகள் இரண்டிலும் விரியட்டும்.

எடுத்துக்காட்டு

முதல் கிரிட் உருப்படி நெடுவரிசை-கோடு 1 இல் தொடங்கி, அது 2 நெடுவரிசைகளை விரியட்டும், மேலும் முதல் கிரிட் உருப்படி வரிசை-கோடு 1 இல் தொடங்கி, அது 2 வரிசைகளை விரியட்டும்:

.item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

முடிவு:

1
2
3
4
5
6

அனைத்து CSS கிரிட் உருப்படி பண்புகள்

CSS கிரிட் உருப்படி பண்புகள் மற்றும் அவற்றின் விளக்கங்கள்:

பண்பு விளக்கம்
align-selfகுறிப்பிட்ட கிரிட் உருப்படிக்கான உள்ளடக்கத்தை நெடுவரிசை அச்சில் சீரமைக்கிறது
grid-areagrid-row-start, grid-column-start, grid-row-end மற்றும் grid-column-end பண்புகளுக்கான சுருக்கப் பண்பு
grid-columngrid-column-start மற்றும் grid-column-end பண்புகளுக்கான சுருக்கப் பண்பு
grid-column-endகிரிட் உருப்படி எங்கு முடியும் என்பதைக் குறிப்பிடுகிறது
grid-column-startகிரிட் உருப்படி எங்கு தொடங்கும் என்பதைக் குறிப்பிடுகிறது
grid-rowgrid-row-start மற்றும் grid-row-end பண்புகளுக்கான சுருக்கப் பண்பு
grid-row-endகிரிட் உருப்படி எங்கு முடியும் என்பதைக் குறிப்பிடுகிறது
grid-row-startகிரிட் உருப்படி எங்கு தொடங்கும் என்பதைக் குறிப்பிடுகிறது
justify-selfகுறிப்பிட்ட கிரிட் உருப்படிக்கான உள்ளடக்கத்தை வரிசை அச்சில் சீரமைக்கிறது
place-selfalign-self மற்றும் justify-self பண்புகளுக்கான சுருக்கப் பண்பு

CSS கிரிட் உருப்படிகள் பயிற்சி

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

🧩 இழுத்து விடுதல் பயிற்சி

கொண்டெய்னரை கிரிட் லேஅவுட்டாக மாற்ற சரியான பண்பு மற்றும் மதிப்பை இழுத்து விடவும்.

.container {
  பண்பு: மதிப்பு;
}
display
position
grid
flex
block
inline-grid