CSS Grid Container - Align Grid Content

CSS கிரிட் கொண்டெய்னர் - கிரிட் உள்ளடக்க சீரமைப்பு

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

justify-content

முதன்மை அச்சில் (கிடைமட்டமாக) அனைத்து கிடைக்கும் இடத்தையும் பயன்படுத்தாத போது கிரிட் உள்ளடக்கத்தை சீரமைக்கிறது

align-content

குறுக்கு அச்சில் (செங்குத்தாக) அனைத்து கிடைக்கும் இடத்தையும் பயன்படுத்தாத போது கிரிட் உள்ளடக்கத்தை சீரமைக்கிறது

place-content

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

CSS justify-content பண்பு

justify-content பண்பு முதன்மை அச்சில் (கிடைமட்டமாக) அனைத்து கிடைக்கும் இடத்தையும் பயன்படுத்தாத போது கிரிட் உள்ளடக்கத்தை சீரமைக்கப் பயன்படுகிறது.

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

space-evenly space-around space-between center start end

📝 குறிப்பு:

justify-content பண்பு எந்த விளைவையும் கொள்ள, கிரிட் உள்ளடக்கத்தின் மொத்த அகலம் கொண்டெய்னரின் அகலத்தை விட குறைவாக இருக்க வேண்டும்.

space-evenly

space-evenly மதிப்பு கிரிட் உருப்படிகளை அவற்றைச் சுற்றி சம இடைவெளியுடன் காட்டுகிறது:

.container {
  display: grid;
  justify-content: space-evenly;
}

space-around

space-around மதிப்பு கிரிட் உருப்படிகளை அவற்றைச் சுற்றி இடைவெளியுடன் காட்டுகிறது:

.container {
  display: grid;
  justify-content: space-around;
}

space-between

space-between மதிப்பு கிரிட் உருப்படிகளை அவற்றுக்கிடையே இடைவெளியுடன் காட்டுகிறது:

.container {
  display: grid;
  justify-content: space-between;
}

center

center மதிப்பு கிரிட் உருப்படிகளை கொண்டெய்னரின் நடுவில் வைக்கிறது:

.container {
  display: grid;
  justify-content: center;
}

start

start மதிப்பு கிரிட் உருப்படிகளை கொண்டெய்னரின் தொடக்கத்தில் வைக்கிறது:

.container {
  display: grid;
  justify-content: start;
}

end

end மதிப்பு கிரிட் உருப்படிகளை கொண்டெய்னரின் முடிவில் வைக்கிறது:

.container {
  display: grid;
  justify-content: end;
}

CSS align-content பண்பு

align-content பண்பு குறுக்கு அச்சில் (செங்குத்தாக) அனைத்து கிடைக்கும் இடத்தையும் பயன்படுத்தாத போது கிரிட் உள்ளடக்கத்தை சீரமைக்கப் பயன்படுகிறது.

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

space-evenly space-around space-between center start end

📝 குறிப்பு:

align-content பண்பு எந்த விளைவையும் கொள்ள, கிரிட் உள்ளடக்கத்தின் மொத்த உயரம் கொண்டெய்னரின் உயரத்தை விட குறைவாக இருக்க வேண்டும்.

பின்வரும் எடுத்துக்காட்டுகளில், align-content பண்பை சிறப்பாக விளக்க 300 பிக்சல் உயரம் கொண்ட கொண்டெய்னரைப் பயன்படுத்துகிறோம்.

center

center மதிப்பு கிரிட் உருப்படிகளை கொண்டெய்னரின் நடுவில் வைக்கிறது:

.container {
  display: grid;
  height: 300px;
  align-content: center;
}

space-evenly

space-evenly உடன், கிரிட் கோடுகள் கிரிட் கொண்டெய்னரில் சமமாக விநியோகிக்கப்படுகின்றன, மேல், கீழ் மற்றும் இடையில் சம இடைவெளியுடன்:

.container {
  display: grid;
  height: 300px;
  align-content: space-evenly;
}

space-around

space-around உடன், கிரிட் கோடுகளுக்கிடையேயான இடைவெளி சமமாக இருக்கும், ஆனால் முதல் கிரிட் உருப்படிக்கு முன்னும் கடைசி கிரிட் உருப்படிக்குப் பின்னும் உள்ள இடைவெளி கிரிட் கோடுகளுக்கிடையேயான இடைவெளியில் பாதியாக அமைக்கப்படும்:

.container {
  display: grid;
  height: 300px;
  align-content: space-around;
}

space-between

space-between உடன், கிரிட் கோடுகளுக்கிடையேயான இடைவெளி சமமாக இருக்கும், ஆனால் முதல் கிரிட் உருப்படி கொண்டெய்னரின் தொடக்க விளிம்புடன் சரியாகவும், கடைசி கிரிட் உருப்படி கொண்டெய்னரின் முடிவு விளிம்புடன் சரியாகவும் இருக்கும்:

.container {
  display: grid;
  height: 300px;
  align-content: space-between;
}

start

start மதிப்பு கிரிட் உருப்படிகளை கொண்டெய்னரின் தொடக்கத்தில் வைக்கிறது:

.container {
  display: grid;
  height: 300px;
  align-content: start;
}

end

end மதிப்பு கிரிட் உருப்படிகளை கொண்டெய்னரின் முடிவில் வைக்கிறது:

.container {
  display: grid;
  height: 300px;
  align-content: end;
}

CSS place-content பண்பு

place-content பண்பு align-content மற்றும் justify-content பண்புகளுக்கான சுருக்கப் பண்பாகும்.

place-content க்கு இரண்டு மதிப்புகள் இருந்தால்:

place-content: start center; - align-content மதிப்பு 'start' மற்றும் justify-content மதிப்பு 'center'

place-content க்கு ஒரு மதிப்பு இருந்தால்:

place-content: end; - align-content மற்றும் justify-content இரண்டின் மதிப்பும் 'end'

📝 குறிப்பு:

place-content பண்பு எந்த விளைவையும் கொள்ள, கிரிட் உருப்படியின் மொத்த உயரம் மற்றும் அகலம் கொண்டெய்னரின் உயரம் மற்றும் அகலத்தை விட குறைவாக இருக்க வேண்டும்.

center

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

.container {
  display: grid;
  height: 300px;
  place-content: center;
}

end space-between

end space-between மதிப்பு கிரிட் கோடுகளை கிரிட் கொண்டெய்னரின் கீழ் பக்கமாக சீரமைக்கிறது, மற்றும் கிரிட் உருப்படிகளை கிடைமட்டமாக அவற்றுக்கிடையே ஒரே இடைவெளியுடன் சீரமைக்கிறது:

.container {
  display: grid;
  height: 300px;
  place-content: end space-between;
}

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

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

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

கொண்டெய்னரை கிரிட் கொண்டெய்னராக மாற்ற சரியான மதிப்பை இழுத்து விடவும்.

                    
                        .grid-container {

                          பண்பு: மதிப்பு;

                        }

display

position

grid

flex

block

inline-grid

✅ சரியான பதில்:

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

💡 முக்கிய குறிப்பு:

justify-content மற்றும் align-content ஆகியவை கிரிட் உருப்படிகளை ஒட்டுமொத்தமாக சீரமைக்கப் பயன்படுகின்றன. தனிப்பட்ட கிரிட் உருப்படிகளை சீரமைக்க justify-items மற்றும் align-items பயன்படுத்தப்படுகின்றன.

முந்தைய அடுத்தது