CSS Grid Items - Alignment

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

CSS கிரிட் உருப்படிகள் - சீரமைப்பு

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

justify-self

ஒரு கலத்திற்குள் கிடைமட்ட சீரமைப்பைக் குறிப்பிடுகிறது

align-self

ஒரு கலத்திற்குள் செங்குத்து சீரமைப்பைக் குறிப்பிடுகிறது

place-self

align-self மற்றும் justify-self பண்புகளுக்கான சுருக்கப் பண்பு

கொண்டெய்னர் மட்டத்தில்

இவை கிரிட் கொண்டெய்னரில் justify-items மற்றும் align-items பயன்படுத்தி அனைத்து கிரிட் உருப்படிகளுக்கும் பயன்படுத்தப்படலாம்

Inline Direction
(கிடைமட்டம்)

ஆங்கிலப் பக்கங்களுக்கு: இடமிருந்து வலம்

justify-self

Block Direction
(செங்குத்து)

ஆங்கிலப் பக்கங்களுக்கு: மேலிருந்து கீழ்

align-self

CSS justify-self பண்பு

justify-self பண்பு ஒரு கிரிட் உருப்படியை அதன் கிரிட் கலத்துக்குள் inline திசையில் சீரமைக்கப் பயன்படுகிறது.

💡 உதவிக்குறிப்பு:

ஆங்கிலப் பக்கங்களுக்கு, inline திசை இடமிருந்து வலமாகவும் block திசை மேலிருந்து கீழாகவும் இருக்கும்.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

auto (இயல்புநிலை) normal stretch start left center end right

📝 குறிப்பு:

இந்த பண்பு எந்த சீரமைப்பு விளைவையும் கொள்ள, கிரிட் உருப்படிக்கு inline திசையில் அதைச் சுற்றி கிடைக்கும் இடம் தேவை.

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

justify-self பண்பைப் பயன்படுத்துதல்:

.item1 {justify-self: right;}
.item6 {justify-self: center;}

முடிவு:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

🔍 கவனிக்க:

Item 1 வலதுபுறமாக சீரமைக்கப்பட்டுள்ளது (justify-self: right)

Item 6 மையத்தில் சீரமைக்கப்பட்டுள்ளது (justify-self: center)

மற்ற உருப்படிகள் இயல்புநிலை சீரமைப்பைக் கொண்டுள்ளன (stretch)

CSS align-self பண்பு

align-self பண்பு ஒரு கிரிட் உருப்படியை அதன் கிரிட் கலத்துக்குள் block திசையில் சீரமைக்கப் பயன்படுகிறது.

இந்த பண்பு பின்வரும் மதிப்புகளில் ஒன்றைக் கொண்டிருக்கலாம்:

auto (இயல்புநிலை) normal stretch start end center

📝 குறிப்பு:

இந்த பண்பு எந்த சீரமைப்பு விளைவையும் கொள்ள, கிரிட் உருப்படிக்கு block திசையில் அதைச் சுற்றி கிடைக்கும் இடம் தேவை.

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

align-self பண்பைப் பயன்படுத்துதல்:

.item1 {align-self: start;}
.item6 {align-self: center;}

முடிவு:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

🔍 கவனிக்க:

Item 1 தொடக்கத்தில் சீரமைக்கப்பட்டுள்ளது (align-self: start)

Item 6 மையத்தில் சீரமைக்கப்பட்டுள்ளது (align-self: center)

மற்ற உருப்படிகள் இயல்புநிலை சீரமைப்பைக் கொண்டுள்ளன (stretch)

CSS கிரிட் சீரமைப்பு பயிற்சி

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

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

கிரிட் உருப்படிக்கு 'header' என்ற பெயரை ஒதுக்க சரியான மதிப்பை இழுத்து விடவும்.

.item1 {
  grid-area: மதிப்பு;
}
header
.header
'header'
header-name
#header
header1

CSS கிரிட் உருப்படி சீரமைப்பு பண்புகள்

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

பண்பு விளக்கம்
align-selfஒரு கிரிட் உருப்படியை அதன் கிரிட் கலத்துக்குள் block திசையில் சீரமைக்கிறது
justify-selfஒரு கிரிட் உருப்படியை அதன் கிரிட் கலத்துக்குள் inline திசையில் சீரமைக்கிறது
place-selfalign-self மற்றும் justify-self பண்புகளுக்கான சுருக்கப் பண்பு

💡 முக்கிய வேறுபாடு:

justify-self vs justify-content:

  • justify-self - தனிப்பட்ட கிரிட் உருப்படியை அதன் கலத்துக்குள் சீரமைக்கிறது
  • justify-content - முழு கிரிட் உள்ளடக்கத்தையும் கொண்டெய்னருக்குள் சீரமைக்கிறது

align-self vs align-content:

  • align-self - தனிப்பட்ட கிரிட் உருப்படியை அதன் கலத்துக்குள் சீரமைக்கிறது
  • align-content - முழு கிரிட் உள்ளடக்கத்தையும் கொண்டெய்னருக்குள் சீரமைக்கிறது