CSS Grid Container

CSS கிரிட் கொண்டெய்னரைக் கற்றுக்கொள்ளுங்கள்

CSS கிரிட் கொண்டெய்னர்

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

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

ஒரு உறுப்பின் display பண்பு grid அல்லது inline-grid என அமைக்கப்பட்டிருக்கும்போது அது கிரிட் கொண்டெய்னராக மாறும்.

1
2
3
4
5

Display Grid பண்பு

ஒரு <div> உறுப்பின் display பண்பு grid அல்லது inline-grid என அமைக்கப்பட்டிருக்கும்போது அது கிரிட் கொண்டெய்னராக மாறும்.

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

பிளாக்-லெவல் கிரிட் கொண்டெய்னரை உருவாக்க display: grid பயன்படுத்தவும்:

.container {
  display: grid;
}

முடிவு:

1
2
3
4
5

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

இன்லைன் கிரிட் கொண்டெய்னரை உருவாக்க display: inline-grid பயன்படுத்தவும்:

.container {
  display: inline-grid;
}

முடிவு:

1
2
3
4
5

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

grid மற்றும் inline-grid இடையே உள்ள வித்தியாசம்:

  • display: grid; - பிளாக்-லெவல் கிரிட் கொண்டெய்னர் (முழு அகலத்தை எடுக்கும்)
  • display: inline-grid; - இன்லைன் கிரிட் கொண்டெய்னர் (உள்ளடக்க அகலத்தை மட்டுமே எடுக்கும்)

CSS கிரிட் கொண்டெய்னர் பண்புகள்

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

பண்பு விளக்கம்
align-contentகொண்டெய்னருக்குள் கிரிட் உருப்படிகளை செங்குத்தாக சீரமைக்கிறது
align-itemsபிளக்ஸ்பாக்ஸ் அல்லது கிரிட் கொண்டெய்னருக்குள் உருப்படிகளுக்கான இயல்புநிலை சீரமைப்பைக் குறிப்பிடுகிறது
displayஉறுப்பின் காட்சி நடத்தையைக் குறிப்பிடுகிறது
column-gapநெடுவரிசைகளுக்கிடையேயான இடைவெளியைக் குறிப்பிடுகிறது
gaprow-gap மற்றும் column-gap பண்புகளுக்கான சுருக்கப் பண்பு
gridgrid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns மற்றும் grid-auto-flow பண்புகளுக்கான சுருக்கப் பண்பு
grid-auto-columnsஇயல்புநிலை நெடுவரிசை அளவைக் குறிப்பிடுகிறது
grid-auto-flowதானாக வைக்கப்பட்ட உருப்படிகள் கிரிட்டில் எவ்வாறு செருகப்படுகின்றன என்பதைக் குறிப்பிடுகிறது
grid-auto-rowsஇயல்புநிலை வரிசை அளவைக் குறிப்பிடுகிறது
grid-templategrid-template-rows, grid-template-columns மற்றும் grid-areas பண்புகளுக்கான சுருக்கப் பண்பு
grid-template-areasபெயரிடப்பட்ட கிரிட் உருப்படிகளைப் பயன்படுத்தி நெடுவரிசைகள் மற்றும் வரிசைகளை எவ்வாறு காட்டுவது என்பதைக் குறிப்பிடுகிறது
grid-template-columnsநெடுவரிசைகளின் அளவு மற்றும் கிரிட் லேஅவுட்டில் எத்தனை நெடுவரிசைகள் என்பதைக் குறிப்பிடுகிறது
grid-template-rowsகிரிட் லேஅவுட்டில் உள்ள வரிசைகளின் அளவைக் குறிப்பிடுகிறது
justify-contentகொண்டெய்னருக்குள் கிரிட் உருப்படிகளை கிடைமட்டமாக சீரமைக்கிறது
place-contentalign-content மற்றும் justify-content பண்புகளுக்கான சுருக்கப் பண்பு
row-gapகிரிட் வரிசைகளுக்கிடையேயான இடைவெளியைக் குறிப்பிடுகிறது

CSS கிரிட் கொண்டெய்னர் பயிற்சி

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

❓ ஒரு உறுப்பு எப்போது கிரிட் கொண்டெய்னராக மாறுகிறது?

position: grid; அமைக்கப்படும்போது
✗ தவறு! position பண்பு grid மதிப்பைக் கொண்டிருக்காது
float: grid; அமைக்கப்படும்போது
✗ தவறு! float பண்பு grid மதிப்பைக் கொண்டிருக்காது
visibility: grid; அமைக்கப்படும்போது
✗ தவறு! visibility பண்பு grid மதிப்பைக் கொண்டிருக்காது
display: grid; அல்லது display: inline-grid; அமைக்கப்படும்போது
✓ சரி! display பண்பு grid அல்லது inline-grid என அமைக்கப்பட்டிருக்கும்போது மட்டுமே ஒரு உறுப்பு கிரிட் கொண்டெய்னராக மாறும்