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