CSS Grid Tracks

CSS கிரிட் ட்ராக்குகளைக் கற்றுக்கொள்ளுங்கள் (வரிசைகள் மற்றும் நெடுவரிசைகள்)

CSS கிரிட் ட்ராக்குகள் (வரிசைகள் மற்றும் நெடுவரிசைகள்)

கிரிட் கொண்டெய்னருக்குள் நீங்கள் கிரிட் நெடுவரிசைகள் மற்றும் வரிசைகளின் எண்ணிக்கை மற்றும் அளவை வரையறுக்கிறீர்கள்.

இதற்காக, நாம் பின்வரும் பண்புகளைப் பயன்படுத்துவோம்:

கிரிட் கொண்டெய்னர்
1
2
3
4
5
6

CSS grid-template-columns பண்பு

grid-template-columns பண்பு கிரிட்டில் உள்ள நெடுவரிசைகளின் எண்ணிக்கை மற்றும் அகலத்தை வரையறுக்கிறது.

மதிப்பு ஒரு இடைவெளி-பிரிக்கப்பட்ட-பட்டியல், ஒவ்வொரு மதிப்பும் தொடர்புடைய நெடுவரிசையின் அகலத்தை வரையறுக்கிறது.

பொதுவான மதிப்புகள்:

நிலையான நீளங்கள்

100px 300px 200px

சதவீதங்கள்

20% 60% 20%

fr அலகு

1fr 2fr 1fr

auto

auto auto auto

repeat()

repeat(3, 1fr)

minmax()

minmax(80px, 1fr) 150px 150px

CSS grid-template-columns: auto

சம அகலம் கொண்ட 3 நெடுவரிசைகளுடன் கூடிய கிரிட் லேஅவுட்டை உருவாக்க, "auto" முக்கிய சொல்லைப் பயன்படுத்தவும்.

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

சம அகலம் கொண்ட 3 நெடுவரிசைகளுடன் கூடிய கிரிட் உருவாக்கவும்:

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

முடிவு:

1
2
3
4
5
6

கலந்த அகலம் கொண்ட கிரிட் நெடுவரிசைகள்

நிலையான அகலம் கொண்ட 2 நெடுவரிசைகள் மற்றும் "auto" அளவு கொண்ட 1 நெடுவரிசையுடன் கூடிய கிரிட் லேஅவுட்டை உருவாக்க.

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

நெடுவரிசை 1 மற்றும் 2 க்கு நிலையான அளவு மற்றும் நெடுவரிசை 3 ஐ auto அளவாகக் கொண்ட கிரிட் உருவாக்கவும்:

.container {
  display: grid;
  grid-template-columns: 80px 200px auto;
}

முடிவு:

1
2
3
4
5
6

📝 குறிப்பு:

3 நெடுவரிசைகள் கொண்ட கிரிட்டில் 3 க்கும் மேற்பட்ட கிரிட் உருப்படிகள் இருந்தால், கிரிட் உருப்படிகளை வைக்க புதிய வரிசைகளை தானாகவே சேர்த்துக்கொள்ளும்.

fr அலகுடன் கிரிட் நெடுவரிசைகள்

fr அலகு "பின்னம்" (fraction) என்பதைக் குறிக்கிறது. இந்த அலகு கிடைக்கும் இடத்தை தானாகவே பின்னங்களாகப் பிரிக்கிறது.

1fr கிடைக்கும் இடத்தின் 1 பின்னத்தை எடுத்துக்கொள்ளும், அதேசமயம் 2fr கிடைக்கும் இடத்தின் 2 பின்னங்களை எடுத்துக்கொள்ளும்.

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

இங்கே, ஒவ்வொரு நெடுவரிசையும் கொண்டெய்னர் அகலத்தின் 33.3% ஐ எடுத்துக்கொள்ளும், அதை சமமாகப் பிரிக்கும்:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

முடிவு:

1
2
3
4
5
6

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

இங்கே, இரண்டாவது நெடுவரிசை மற்றவற்றை விட இருமடங்கு பெரியதாக இருக்கும்:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

முடிவு:

1
2
3
4
5
6

repeat() செயல்பாட்டுடன் கிரிட் நெடுவரிசைகள்

CSS repeat() செயல்பாடு கிரிட்டில் நெடுவரிசைகள் அல்லது வரிசைகளின் தொகுப்பை மீண்டும் மீண்டும் செய்யப் பயன்படுத்தப்படுகிறது.

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

கிரிட்டில் சம-அகலம் கொண்ட மூன்று நெடுவரிசைகளை உருவாக்க repeat() பயன்படுத்தவும்:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

முடிவு:

1
2
3
4
5
6

minmax() செயல்பாட்டுடன் கிரிட் நெடுவரிசைகள்

CSS minmax() செயல்பாடு ஒரு குறைந்தபட்ச மதிப்பை விட அதிகமாகவோ அல்லது சமமாகவோ மற்றும் அதிகபட்ச மதிப்பை விட குறைவாகவோ அல்லது சமமாகவோ இருக்கும் அளவு-வரம்பை வரையறுக்கப் பயன்படுத்தப்படுகிறது.

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

முதல் நெடுவரிசை குறைந்தது 80px அகலமாக இருக்கும் மற்றும் 1fr வரை வளரும் என வரையறுக்க minmax() பயன்படுத்தவும்:

.container {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 150px 150px;
}

முடிவு:

1
2
3
4
5
6

CSS grid-template-rows பண்பு

grid-template-rows பண்பு கிரிட்டில் உள்ள வரிசைகளின் எண்ணிக்கை மற்றும் உயரத்தை வரையறுக்கிறது.

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

பொதுவான மதிப்புகள்:

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

கிரிட்டில் உள்ள முதல் வரிசையை 80px உயரமாகவும், இரண்டாவது வரிசையை 200px உயரமாகவும் அமைக்கவும்:

.container {
  display: grid;
  grid-template-rows: 80px 200px;
}

முடிவு:

1
2
3
4
5
6
7
8

கவனிக்க: மேலே உள்ள கிரிட்டில் உள்ள முதல் வரிசை 80px உயரமாகவும், இரண்டாவது வரிசை 200px உயரமாகவும் உள்ளது. அடுத்த வரிசைகள் இயல்புநிலையாக auto ஐப் பயன்படுத்தும்.

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

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

❓ கிரிட்டில் சம அகலம் கொண்ட 4 நெடுவரிசைகளை உருவாக்க எந்த CSS குறியீடு சரியானது?

grid-template-columns: 4;
✗ தவறு! இந்த தொடரியல் சரியானது அல்ல
grid-template-columns: repeat(4, 1fr);
✓ சரி! repeat() செயல்பாடு சம அகலம் கொண்ட 4 நெடுவரிசைகளை உருவாக்கும்
grid-template-rows: 1fr 1fr 1fr 1fr;
✗ தவறு! இது வரிசைகளுக்கானது, நெடுவரிசைகளுக்கு அல்ல
grid-columns: 4 auto;
✗ தவறு! grid-columns என்ற பண்பு இல்லை