CSS Grid Gap

CSS கிரிட் இடைவெளிகளைக் கற்றுக்கொள்ளுங்கள்

CSS கிரிட் இடைவெளிகள்

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

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

1
2
3
4
5
6
நெடுவரிசை இடைவெளி
வரிசை இடைவெளி

இடைவெளியின் இயல்புநிலை அளவு 0 ஆகும், அதாவது கிரிட் உருப்படிகளுக்கு இடையே எந்த இடைவெளியும் இல்லை.

இடைவெளியின் அளவை பின்வரும் பண்புகளுடன் சரிசெய்யலாம்:

CSS column-gap பண்பு

column-gap பண்பு கிரிட்டில் உள்ள நெடுவரிசைகளுக்கு இடையேயான இடைவெளியைக் குறிப்பிடுகிறது.

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

கிரிட் நெடுவரிசைகளுக்கு இடையே 50 பிக்சல் இடைவெளியைக் குறிப்பிடவும்:

.container {
  display: grid;
  column-gap: 50px;
}

முடிவு:

1
2
3
4
5

CSS row-gap பண்பு

row-gap பண்பு கிரிட்டில் உள்ள வரிசைகளுக்கு இடையேயான இடைவெளியைக் குறிப்பிடுகிறது.

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

கிரிட் வரிசைகளுக்கு இடையே 50 பிக்சல் இடைவெளியைக் குறிப்பிடவும்:

.container {
  display: grid;
  row-gap: 50px;
}

முடிவு:

1
2
3
4
5

CSS gap பண்பு

gap பண்பு row-gap மற்றும் column-gap க்கான சுருக்கப் பண்பாகும்.

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

இரண்டு மதிப்புகள் வழங்கப்பட்டால், முதல் மதிப்பு row-gap ஐ அமைக்கிறது, மற்றும் இரண்டாவது மதிப்பு column-gap ஐ அமைக்கிறது.

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

ஒரு மதிப்பைப் பயன்படுத்துதல் - வரிசைகள் மற்றும் நெடுவரிசைகளுக்கு இடையேயான இடைவெளியை 50px என அமைக்கவும்:

.container {
  display: grid;
  gap: 50px;
}

முடிவு:

1
2
3
4
5

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

இரண்டு மதிப்புகளைப் பயன்படுத்துதல் - வரிசைகளுக்கு இடையேயான இடைவெளியை 30px எனவும், நெடுவரிசைகளுக்கு இடையேயான இடைவெளியை 100px எனவும் அமைக்கவும்:

.container {
  display: grid;
  gap: 30px 100px;
}

முடிவு:

1
2
3
4
5

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

gap: 20px; என்பது row-gap: 20px; column-gap: 20px; என்பதற்கு சமம்.

gap: 10px 30px; என்பது row-gap: 10px; column-gap: 30px; என்பதற்கு சமம்.

CSS கிரிட் கேப் பண்புகள்

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

பண்பு விளக்கம்
column-gapகிரிட் நெடுவரிசைகளுக்கு இடையேயான இடைவெளியைக் குறிப்பிடுகிறது
gaprow-gap மற்றும் column-gap பண்புகளுக்கான சுருக்கப் பண்பு
row-gapகிரிட் வரிசைகளுக்கு இடையேயான இடைவெளியைக் குறிப்பிடுகிறது

CSS கிரிட் கேப் பயிற்சி

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

❓ வரிசைகளுக்கு இடையே 20px இடைவெளியையும், நெடுவரிசைகளுக்கு இடையே 40px இடைவெளியையும் அமைக்க எந்த CSS குறியீடு சரியானது?

gap: 20px 40px;
✗ தவறு! gap: 20px 40px; என்பது row-gap: 20px; column-gap: 40px; என்பதற்கு சமம்
row-gap: 20px; column-gap: 40px;
✓ சரி! row-gap மற்றும் column-gap பண்புகளை தனித்தனியாகப் பயன்படுத்தலாம்
margin: 20px 40px;
✗ தவறு! margin பண்பு கிரிட் இடைவெளிகளுக்குப் பயன்படுத்தப்படுவதில்லை
grid-gap: 20px 40px;
✗ தவறு! grid-gap என்பது பழைய பெயர், புதிய பதிப்புகளில் gap பயன்படுத்துங்கள்

📚 வரலாற்றுக் குறிப்பு:

CSS கிரிடின் ஆரம்ப பதிப்புகளில் grid-gap, grid-row-gap, மற்றும் grid-column-gap பண்புகள் பயன்படுத்தப்பட்டன. இப்போது gap, row-gap, மற்றும் column-gap ஆகியவை நிலையான பண்புகளாகும்.