CSS Grid Layout - Jassif Team

CSS கிரிட் லேஅவுட்

CSS கிரிட் லேஅவுட் தொகுதி வரிசைகள் மற்றும் நெடுவரிசைகளுடன் கூடிய கட்டமைப்பு அமைப்பை வழங்குகிறது.

கிரிட் லேஅவுட் தொகுதி டெவலப்பர்கள் எளிதாக சிக்கலான வலை அமைப்புகளை உருவாக்க அனுமதிக்கிறது.

கிரிட் லேஅவுட் தொகுதி மிதவை அல்லது நிலைப்படுத்தல் பயன்படுத்தாமல் பதிலளிக்கும் லேஅவுட் கட்டமைப்பை வடிவமைக்க எளிதாக்குகிறது.

எனது தலைப்பு

Lorem Ipsum

Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut.

கிரிட் vs. பிளக்ஸ்பாக்ஸ்

CSS கிரிட்

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

CSS பிளக்ஸ்பாக்ஸ்

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

CSS கிரிட் கூறுகள்

ஒரு கிரிட் எப்போதும் பின்வரும் கூறுகளைக் கொண்டுள்ளது:

கிரிட் கொண்டெய்னர் - பெற்றோர் (கொண்டெய்னர்) உறுப்பு, அங்கு display பண்பு grid அல்லது inline-grid என அமைக்கப்பட்டிருக்கும்
ஒன்று அல்லது அதற்கு மேற்பட்ட கிரிட் உருப்படிகள் - கிரிட் கொண்டெய்னரின் நேரடி குழந்தைகள் தானாகவே கிரிட் உருப்படிகளாக மாறும்

ஐந்து கிரிட் உருப்படிகள் கொண்ட கிரிட் கொண்டெய்னர்

கீழே உள்ள உறுப்பு ஐந்து கிரிட் உருப்படிகளைக் கொண்ட கிரிட் கொண்டெய்னரைக் குறிக்கிறது (நீலப் பகுதி).

1

2

3

4

5

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

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

HTML & CSS குறியீடு

<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: dodgerblue;
  padding: 10px;
}
.container div {
  background-color: #f1f1f1;
  border: 1px solid black;
  padding: 10px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

</body>
</html>

📚 குறிப்பு:

கிரிட் கொண்டெய்னர்கள் மற்றும் கிரிட் உருப்படிகள் பற்றி மேலும் அடுத்த அத்தியாயங்களில் கற்றுக்கொள்வீர்கள்.

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

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

பண்பு	விளக்கம்
align-content	முழு கிரிடையும் கொண்டெய்னருக்குள் செங்குத்தாக சீரமைக்கிறது (மொத்த கிரிட் அளவு கொண்டெய்னரை விட சிறியதாக இருக்கும்போது)
align-items	பிளக்ஸ்பாக்ஸ் அல்லது கிரிட் கொண்டெய்னருக்குள் உருப்படிகளுக்கான இயல்புநிலை சீரமைப்பைக் குறிப்பிடுகிறது
align-self	குறிப்பிட்ட கிரிட் உருப்படிக்கான உள்ளடக்கத்தை நெடுவரிசை அச்சில் சீரமைக்கிறது
display	உறுப்பின் காட்சி நடத்தையைக் குறிப்பிடுகிறது
column-gap	நெடுவரிசைகளுக்கிடையேயான இடைவெளியைக் குறிப்பிடுகிறது
gap	row-gap மற்றும் column-gap பண்புகளுக்கான சுருக்கப் பண்பு
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns மற்றும் grid-auto-flow பண்புகளுக்கான சுருக்கப் பண்பு
grid-area	கிரிட் உருப்படிக்கு ஒரு பெயரைக் குறிப்பிடுகிறது அல்லது இந்தப் பண்பு grid-row-start, grid-column-start, grid-row-end மற்றும் grid-column-end பண்புகளுக்கான சுருக்கப் பண்பாகும்
grid-auto-columns	இயல்புநிலை நெடுவரிசை அளவைக் குறிப்பிடுகிறது
grid-auto-flow	தானாக வைக்கப்பட்ட உருப்படிகள் கிரிட்டில் எவ்வாறு செருகப்படுகின்றன என்பதைக் குறிப்பிடுகிறது
grid-auto-rows	இயல்புநிலை வரிசை அளவைக் குறிப்பிடுகிறது
grid-column	grid-column-start மற்றும் grid-column-end பண்புகளுக்கான சுருக்கப் பண்பு
grid-column-end	கிரிட் உருப்படியை எங்கு முடிப்பது என்பதைக் குறிப்பிடுகிறது
grid-column-start	கிரிட் உருப்படியை எங்கு தொடங்குவது என்பதைக் குறிப்பிடுகிறது
grid-row	grid-row-start மற்றும் grid-row-end பண்புகளுக்கான சுருக்கப் பண்பு
grid-row-end	கிரிட் உருப்படியை எங்கு முடிப்பது என்பதைக் குறிப்பிடுகிறது
grid-row-start	கிரிட் உருப்படியை எங்கு தொடங்குவது என்பதைக் குறிப்பிடுகிறது
grid-template	grid-template-rows, grid-template-columns மற்றும் grid-areas பண்புகளுக்கான சுருக்கப் பண்பு
grid-template-areas	பெயரிடப்பட்ட கிரிட் உருப்படிகளைப் பயன்படுத்தி நெடுவரிசைகள் மற்றும் வரிசைகளை எவ்வாறு காட்டுவது என்பதைக் குறிப்பிடுகிறது
grid-template-columns	நெடுவரிசைகளின் அளவு மற்றும் கிரிட் லேஅவுட்டில் எத்தனை நெடுவரிசைகள் என்பதைக் குறிப்பிடுகிறது
grid-template-rows	கிரிட் லேஅவுட்டில் உள்ள வரிசைகளின் அளவைக் குறிப்பிடுகிறது
justify-content	முழு கிரிடையும் கொண்டெய்னருக்குள் கிடைமட்டமாக சீரமைக்கிறது (மொத்த கிரிட் அளவு கொண்டெய்னரை விட சிறியதாக இருக்கும்போது)
justify-self	குறிப்பிட்ட கிரிட் உருப்படிக்கான உள்ளடக்கத்தை வரிசை அச்சில் சீரமைக்கிறது
place-self	align-self மற்றும் justify-self பண்புகளுக்கான சுருக்கப் பண்பு
place-content	align-content மற்றும் justify-content பண்புகளுக்கான சுருக்கப் பண்பு
row-gap	கிரிட் வரிசைகளுக்கிடையேயான இடைவெளியைக் குறிப்பிடுகிறது

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

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

❓ CSS கிரிட் கொண்டெய்னரை உருவாக்குவதற்கான சரியான வழி எது?

display: flex;

✗ தவறு! இது CSS பிளக்ஸ்பாக்ஸுக்கானது

display: block;

✗ தவறு! இது சாதாரண தடுப்பு உறுப்புக்கானது

display: grid;

✓ சரி! இது CSS கிரிட் கொண்டெய்னரை உருவாக்குகிறது

display: inline;

✗ தவறு! இது இன்லைன் உறுப்புக்கானது