CSS கிரிட் உருவாக்கி

CSS கிரிட் தளவமைப்பு அறிமுகம்

CSS கிரிட் தளவமைப்பு (CSS Grid Layout) என்பது இணையப் பக்கங்களை இரு பரிமாணங்களில் வடிவமைக்க உதவும் ஒரு சக்திவாய்ந்த அமைப்பாகும். இதன் மூலம் நெடுவரிசைகள் (columns) மற்றும் வரிசைகளை (rows) ஒரே நேரத்தில் கட்டுப்படுத்த முடியும். இணையப் பக்கத்தின் தளவமைப்பை எளிமையாகவும் துல்லியமாகவும் உருவாக்க இந்தத் தொழில்நுட்பம் பயன்படுகிறது. கைமுறையாகக் குறியீடுகளை எழுதுவதற்குப் பதிலாக, "CSS கிரிட் உருவாக்கி" கருவியைப் பயன்படுத்தி காட்சி வடிவில் தளவமைப்பை வடிவமைத்து, அதற்கான குறியீடுகளை உடனடியாகப் பெற முடியும்.

grid-template-columns மற்றும் grid-template-rows புரிதல்

ஒரு கிரிட் கொள்கலனின் (grid container) நெடுவரிசைகள் மற்றும் வரிசைகளின் எண்ணிக்கையையும் அவற்றின் அளவுகளையும் தீர்மானிக்க grid-template-columns மற்றும் grid-template-rows ஆகிய பண்புகள் பயன்படுகின்றன.

இந்தக் கருவியில் பின்வரும் உள்ளீட்டு வரம்புகள் மற்றும் விதிகள் பயன்படுத்தப்படுகின்றன:

• நெடுவரிசைகள்: 1 முதல் 12 வரையிலான எண்.
• வரிசைகள் (Rows): 1 முதல் 12 வரையிலான எண்.
• நெடுவரிசை அளவுகள் மற்றும் வரிசை அளவுகள்: செல்லுபடியாகும் எந்தவொரு CSS கிரிட் மதிப்பையும் இங்கு உள்ளிடலாம். உதாரணமாக:
  • 1fr (விகிதாசார அளவு)
  • 200px (நிலையான பிக்சல் அளவு)
  • auto (தானியங்கி அளவு)
  • min-content (குறைந்தபட்ச உள்ளடக்கம்)
  • minmax(120px, 1fr) (குறைந்தபட்சம் மற்றும் அதிகபட்ச வரம்பு)

ஒவ்வொரு தட்டிற்கும் (track) அதன் சொந்த அளவு பெட்டி உள்ளது, அங்கு தேவையான மதிப்பைத் தட்டச்சு செய்யலாம். உள்ளீட்டுப் பெட்டியில் not-a-grid-track போன்ற தவறான மதிப்பை உள்ளிட்டால், அந்த உள்ளீட்டுப் புலம் தவறானது எனக் குறிக்கப்படும், ஆனால் வெளியீட்டு CSS குறியீடு கடைசியாகப் பயன்படுத்தப்பட்ட சரியான மதிப்பையே தக்க வைத்துக் கொள்ளும்.

CSS கிரிட்டில் fr அலகு மற்றும் repeat() பயன்பாடு

CSS கிரிட்டில் பயன்படுத்தப்படும் fr என்பது ஒரு நெகிழ்வான அலகு (fractional unit) ஆகும். இது கிரிட் கொள்கலனில் உள்ள மீதமுள்ள காலி இடத்தை விகிதாசார அடிப்படையில் பிரித்தளிக்கப் பயன்படுகிறது. உதாரணமாக, மூன்று நெடுவரிசைகளுக்கு முறையே 1fr 1fr 1fr என அமைத்தால், அவை சமமான அளவில் இடத்தைப் பகிர்ந்து கொள்ளும்.

ஒரே அளவைக் கொண்ட பல தட்டுகள் (tracks) தொடர்ச்சியாக வரும்போது, குறியீட்டைச் சுருக்கமாக எழுத repeat() செயல்பாடு பயன்படுகிறது. இந்தக் கருவியில், ஒரே அளவைப் பகிரும் நெடுவரிசைகள் அல்லது வரிசைகள் வெளியீட்டு CSS குறியீட்டில் தானாகவே repeat() செயல்பாடாக மடக்கப்பட்டு சுருக்கமான வடிவில் வழங்கப்படுகின்றன.

column-gap மற்றும் row-gap மூலம் இடைவெளிகளை வரையறுத்தல்

கிரிட் தட்டுகளுக்கு இடையே உள்ள இடைவெளிகளைக் கட்டுப்படுத்த பிரத்யேகப் பண்புகள் உள்ளன.

• நெடுவரிசை இடைவெளி: 0 முதல் 48px வரையிலான எண்.
• வரிசை இடைவெளி (Row gap): 0 முதல் 48px வரையிலான எண்.

நெடுவரிசை இடைவெளி மற்றும் வரிசை இடைவெளி ஆகிய இரண்டும் தனித்தனியாக அமைக்கப்பட்டாலும், அவை இரண்டும் ஒரே மதிப்பாக இருக்கும்போது, வெளியீட்டு CSS குறியீட்டில் அவை சுருக்கப்பட்டு ஒற்றை gap பண்பாக மாற்றப்படும்.

grid-column மற்றும் grid-row கொண்டு உருப்படிகளை நிலைநிறுத்துதல்

கிரிட் தளவமைப்பில் உருப்படிகளை வைப்பதற்கு, கலங்களின் (cells) குறுக்கே அழுத்தி இழுப்பதன் மூலம் ஒரு செவ்வகப் பகுதியைத் தேர்ந்தெடுக்க வேண்டும். மவுஸ் பொத்தானை விடுவிக்கும் போது, தேர்ந்தெடுக்கப்பட்ட நெடுவரிசைகள் மற்றும் வரிசைகளை உள்ளடக்கிய ஒரு குழந்தை உருப்படி (child item) உருவாக்கப்படும்.

உருப்படிகளை நிலைநிறுத்துவதில் உள்ள விதிகள்:

• இவ்வாறு வரையப்படும் ஒவ்வொரு உருப்படியும் CSS-இல் அதன் சொந்த grid-column மற்றும் grid-row விதியையும், HTML-இல் அதற்குப் பொருந்தும் div உறுப்பையும் பெறுகிறது.
• உருப்படிகள் ஒன்றுடன் ஒன்று மேலெழுந்து (overlap) அமையும் வாய்ப்பு உள்ளது; அவ்வாறு அமையும் போது, பின்னர் வரையப்பட்ட உருப்படி மற்றொன்றின் மேலே அமையும்.
• ஒரு உருப்படியில் உள்ள "×" குறியீட்டைக் கிளிக் செய்வதன் மூலம் அதை நீக்கலாம்.
• இந்தக் கருவி அதிகபட்சமாக 16 உருப்படிகள் வரை ஆதரிக்கிறது.
• "உருப்படிகளை அகற்று" பொத்தானைப் பயன்படுத்தினால், கொள்கலன் காலியாகி உருப்படிகளின் எண்ணிக்கை 0 ஆக மாறும். "உருப்படியைச் சேர்" பொத்தானை அழுத்துவதன் மூலம் புதிய HTML உருப்படியை உருவாக்கலாம்.

பொதுவான கிரிட் தளவமைப்பு முன்னமைவுகள்

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

1. பக்கவாட்டுப் பட்டி: பக்கவாட்டுப் பகுதியுடன் கூடிய தளவமைப்பு.
2. தலைப்பு மற்றும் அடிக்குறிப்பு: மேல் பகுதி மற்றும் கீழ் பகுதியைக் கொண்ட வடிவமைப்பு.
3. கேலரி: புகைப்படங்கள் அல்லது படங்களை வரிசையாக அடுக்கும் வடிவமைப்பு. இந்த முன்னமைவு 3 நெடுவரிசைகள், 2 வரிசைகள் மற்றும் 3 உருப்படிகளைத் தானாகவே உருவாக்குகிறது.
4. டாஷ்போர்டு: கட்டுப்பாட்டுப் பலகத்திற்கான தளவமைப்பு.

தரவு செயலாக்கம் மற்றும் தனியுரிமை

இந்தக் கருவியைப் பயன்படுத்தும் போது தனியுரிமை முழுமையாகப் பாதுகாக்கப்படுகிறது. உங்கள் கிரிட் வடிவமைப்பு முற்றிலும் உங்கள் உலாவியிலேயே உருவாக்கப்படுகிறது. நீங்கள் இங்கு அமைக்கும் எந்தவொரு தரவோ அல்லது உள்ளீடோ இணையத்தில் பதிவேற்றப்படாது.

---

அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)

கிரிட்டில் உருப்படிகளை நான் எவ்வாறு வைப்பது?

ஒரு செவ்வகத்தைக் குறிக்க கலங்களின் குறுக்கே அழுத்தி இழுக்கவும் — நீங்கள் விடும்போது அது அந்த நெடுவரிசைகள் மற்றும் வரிசைகளை உள்ளடக்கிய ஒரு வைக்கப்பட்ட உருப்படியாக மாறும். நீங்கள் வரையும் ஒவ்வொரு உருப்படியும் CSS-இல் அதன் சொந்த grid-column மற்றும் grid-row விதியையும், HTML-இல் பொருந்தும் div-ஐயும் பெறுகிறது. உருப்படிகள் ஒன்றுடன் ஒன்று மேலெழுந்து வரலாம், மேலும் பின்னர் வரையப்பட்டவை மேலே அமையும்; அதை நீக்க உருப்படியில் உள்ள × ஐப் பயன்படுத்தவும்.

நெடுவரிசைகளும் வரிசைகளும் வெவ்வேறு அளவுகளில் இருக்க முடியுமா?

ஆம். ஒவ்வொரு தட்டிற்கும் (track) அதன் சொந்த அளவு பெட்டி உள்ளது, மேலும் நீங்கள் அங்கு எந்த கிரிட் மதிப்பையும் தட்டச்சு செய்யலாம் — 1fr, 200px, auto, min-content அல்லது minmax(120px, 1fr). ஒரே அளவைப் பகிரும் தட்டுகள் repeat() இல் மடக்கப்படுவதால் வெளியீடு சுருக்கமாக இருக்கும். நெடுவரிசை இடைவெளி மற்றும் வரிசை இடைவெளி ஆகியவை அவற்றின் சொந்தமாக அமைக்கப்பட்டு, அவை பொருந்தும்போது ஒற்றை இடைவெளியாக மாறும்.

உருவாக்கப்பட்ட குறியீட்டை நான் என்ன செய்ய வேண்டும்?

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