Tailwind CSS గ్రిడ్ సిస్టమ్‌ను అందిస్తుంది, ఇది వినియోగదారులు గ్రిడ్-కోల్స్ మరియు గ్రిడ్-రోస్ యుటిలిటీలను ఉపయోగించి వెబ్ పేజీని నిలువు వరుసలుగా విభజించడానికి అనుమతిస్తుంది. ఇది గ్రిడ్ నిలువు వరుసల అంతటా మూలకాల పరిమాణం మరియు ప్లేస్‌మెంట్‌ను నియంత్రించడానికి గ్రిడ్ కాలమ్ ప్రారంభం మరియు ముగింపు ప్రయోజనాలను కూడా అందిస్తుంది. ఈ యుటిలిటీలు గ్రిడ్ లేఅవుట్‌లో మూలకం యొక్క ప్రారంభ మరియు ముగింపు స్థానాలను పేర్కొనడానికి వినియోగదారులను అనుమతిస్తాయి.
ఈ కథనం టైల్‌విండ్ CSSలోని నిర్దిష్ట nవ గ్రిడ్ లైన్‌లో నిలువు వరుసలను ప్రారంభించే లేదా ముగించే పద్ధతిని వివరిస్తుంది.
టైల్‌విండ్‌లోని nవ గ్రిడ్ లైన్‌లో నిలువు వరుసలను ప్రారంభించడం లేదా ముగించడం ఎలా?
టైల్‌విండ్‌లోని nవ గ్రిడ్ లైన్‌లో నిలువు వరుసలను ప్రారంభించడం లేదా ముగించడం కోసం, “ని ఉపయోగించండి col-start-
దశ 1: HTML ప్రోగ్రామ్‌లో గ్రిడ్ మూలకాల యొక్క ప్రారంభ మరియు ముగింపు స్థానాలను పేర్కొనండి
HTML ప్రోగ్రామ్‌ను రూపొందించి, 'ని ఉపయోగించండి col-start-
< శరీరం >
< h1 తరగతి = 'టెక్స్ట్-2xl టెక్స్ట్-సెంటర్' >
టైల్‌విండ్ CSS - కాలమ్ ప్రారంభం / ముగింపు
h1 >
< div తరగతి = 'గ్రిడ్ గ్రిడ్-కోల్స్-4 గ్యాప్-3 మీ-3' >
< div తరగతి = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div తరగతి = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div తరగతి = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div తరగతి = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div తరగతి = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
శరీరం >
ఇక్కడ, పేరెంట్
- ' గ్రిడ్ ” గ్రిడ్ లేఅవుట్‌ను రూపొందించడానికి ఉపయోగించబడుతుంది.
- ' గ్రిడ్-కోల్స్-4 ” క్లాస్ గ్రిడ్ 4 సమాన పరిమాణ నిలువు వరుసలను కలిగి ఉండాలని నిర్దేశిస్తుంది.
- ' ఖాళీ-3 ” తరగతి ప్రతి గ్రిడ్ అంశం మధ్య 3 యూనిట్ల అంతరాన్ని సెట్ చేస్తుంది.
- ' m-3 ” క్లాస్ గ్రిడ్ కంటైనర్ చుట్టూ 3 యూనిట్ల మార్జిన్‌ని జోడిస్తుంది.
లోపలి చైల్డ్
- ' col-start-2 ” గ్రిడ్ అంశం కాలమ్ 2 వద్ద మొదలవుతుందని ప్రాపర్టీ నిర్దేశిస్తుంది.
- ' col-span-2 ” గ్రిడ్ అంశం 2 నిలువు వరుసలను ఆక్రమించిందని సూచిస్తుంది.
- ' col-start-1 ” అనేది కాలమ్ 1 నుండి గ్రిడ్ అంశాన్ని ప్రారంభించడానికి ఉపయోగించబడుతుంది.
- ' col-end-3 ” గ్రిడ్ అంశం కాలమ్ 3 వద్ద ముగుస్తుందని పేర్కొంటుంది.
- ' col-start-3 ” గ్రిడ్ అంశం రెండవ నిలువు వరుస నుండి మొదలవుతుందని సూచిస్తుంది.
- ' col-end-5 ” ఆస్తి గ్రిడ్ అంశాన్ని కాలమ్ 5 వద్ద ముగిస్తుంది.
- ' col-span-3 ” గ్రిడ్ అంశం 3 నిలువు వరుసలను ఆక్రమించిందని పేర్కొంటుంది.
- ' bg-teal-500 ”అన్ని గ్రిడ్ ఐటెమ్‌ల నేపథ్యానికి టీల్ కలర్ సెట్ చేస్తుంది.
- ' p-5 ” గ్రిడ్ ఐటెమ్‌లలోని కంటెంట్‌కు 5 యూనిట్ల పాడింగ్‌ని జోడిస్తుంది.
దశ 2: అవుట్‌పుట్‌ని ధృవీకరించండి
గ్రిడ్ కాలమ్ ప్రారంభ మరియు ముగింపు స్థానాలు వర్తింపజేయబడిందని నిర్ధారించుకోవడానికి, HTML వెబ్ పేజీని వీక్షించండి:
గ్రిడ్ కాలమ్ ప్రారంభ మరియు ముగింపు స్థానాలు పేర్కొన్న వాటి ప్రకారం విజయవంతంగా వర్తింపజేయబడిందని ఎగువ అవుట్‌పుట్ సూచిస్తుంది.
ముగింపు
టైల్‌విండ్‌లోని nవ గ్రిడ్ లైన్‌లో నిలువు వరుసలను ప్రారంభించడం లేదా ముగించడం కోసం, “ col-start-