CSS Grid என்றால் என்ன?
CSS Grid Layout என்பது நவீன உலாவிகளில் உள்ளமைக்கப்பட்ட இரு-பரிமாண தளவமைப்பு முறை. display: grid மூலம் கிரிட் கொள்கலனை வரையறுத்து, grid-template-columns மூலம் நெடுவரிசைகளையும் grid-template-rows மூலம் வரிசைகளையும் கட்டுப்படுத்தவும். பின்னம் அலகுகள் (fr) கிடைக்கும் இடத்தை விகிதத்தில் பகிர்கின்றன. குழந்தை உருப்படிகள் grid-column: span N மற்றும் grid-row: span N பயன்படுத்தி பல நெடுவரிசைகள் அல்லது வரிசைகளை உள்ளடக்கலாம்.
CSS Grid உருவாக்கியை எவ்வாறு பயன்படுத்துவது
-
எண் உள்ளீடுகளைப் பயன்படுத்தி நெடுவரிசைகள் மற்றும் வரிசைகளின் எண்ணிக்கையை அமைக்கவும் (ஒவ்வொன்றுக்கும் 1–12).
-
அளவுகளை கட்டுப்படுத்த grid-template-columns மற்றும் grid-template-rows சரிசெய்யவும் (எ.கா: 1fr 2fr, 200px auto).
-
கலங்களுக்கு இடையிலான இடைவெளியை அமைக்கவும் (எ.கா: 10px, 1rem).
-
தேர்ந்தெடுக்க முன்னோட்டத்தில் எந்த கலத்திலும் கிளிக் செய்யவும் (ஆரஞ்சு நிறமாகும்).
-
கல விரிவு பலகத்தில் col-span மற்றும் row-span அமைத்து, பின்னர் பயன்படுத்து கிளிக் செய்யவும். விரிவடைந்த கலங்கள் பச்சையாகும்.
-
வெளியீட்டு வடிவத்தை மாற்ற CSS அல்லது HTML தாவலை கிளிக் செய்யவும், பின்னர் கிளிப்போர்டுக்கு நகலெடுக்கவும்.
-
புதிய 3×3 கிரிட்டுடன் மீண்டும் தொடங்க அனைத்தையும் மீட்டமை கிளிக் செய்யவும்.