𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
మీ CSS లేఅవుట్లతో పోరాడటం ఆపండి.
నేను Flexboxతో పాడైపోయిన లేఅవుట్లను సరిచేయడానికి గంటల కొద్దీ సమయం వృథా చేసేవాడిని. ఐటమ్స్ను ఒక వరుసలో (row) అమర్చడానికి ప్రయత్నించేవాడిని, కానీ చివరి ఐటమ్ స్క్రీన్ అంతా విస్తరించిపోయేది. అది చూడటానికి సరిగ్గా ఉండేది కాదు. నేను మార్జిన్లు మరియు ఇతర చిట్కాలను ప్రయత్నించాను, కానీ ఏదీ పనిచేయలేదు.
అప్పుడు నేను నా ఆలోచనా విధానాన్ని CSS Grid వైపు మళ్లించాను.
తేడా చాలా సులభం:
- Flexbox అనేది వన్-డైమెన్షనల్ (one-dimensional) లేఅవుట్ల కోసం. దీనిని ఒకే వరుస (row) లేదా ఒకే కాలమ్ (column) కోసం ఉపయోగించండి.
- CSS Grid అనేది టూ-డైమెన్షనల్ (two-dimensional) లేఅవుట్ల కోసం. మీకు వరుసలు (rows) మరియు కాలమ్లు (columns) రెండింటినీ ఒకేసారి నియంత్రించాల్సిన అవసరం ఉన్నప్పుడు దీనిని ఉపయోగించండి.
Flexboxను చిన్న పనుల కోసం ఉపయోగించే సాధనంగా భావించండి. Gridను మీ పూర్తి పేజీ నిర్మాణానికి (page structure) ఉపయోగించే సాధనంగా భావించండి.
The Flexbox Trap: మీరు గ్యాలరీ కోసం Flexboxని ఉపయోగించినప్పుడు, ప్రతి స్క్రీన్ సైజులో ఐటమ్స్ ఖచ్చితంగా అమరకపోవచ్చు. తరచుగా మీ డిజైన్ రిథమ్ను దెబ్బతీసే "orphan" (ఒంటరి) ఐటమ్స్ మిగిలిపోతాయి.
The Grid Solution: Gridతో, మీరు కేవలం ఒకే లైన్ కోడ్తో రెస్పాన్సివ్ గ్యాలరీలను సృష్టించవచ్చు.
దీన్ని ఉపయోగించండి: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
ఇది బ్రౌజర్కు వీలైనన్ని ఎక్కువ 250px కాలమ్లను అమర్చమని చెబుతుంది. బ్రౌజర్ మీ కోసం లెక్కలు వేస్తుంది. ఇకపై ఊహించాల్సిన అవసరం లేదు. వరుసలు పాడైపోయే సమస్య ఉండదు.
The Dashboard Example: సైడ్బార్, మెయిన్ కంటెంట్ మరియు ఫుటర్ ఉన్న డాష్బోర్డ్ను Flexboxతో నిర్మించడం కష్టం. ఫుటర్ మొత్తం వెడల్పును ఆక్రమించేలా చేయడానికి మీరు తరచుగా నెస్టెడ్ కంటైనర్లు (nested containers) మరియు గందరగోళమైన కోడ్ను ఉపయోగించాల్సి వస్తుంది.
Gridతో, మీరు ట్రాక్లను (tracks) ఒక్కసారి నిర్వచిస్తే సరిపోతుంది: grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
ఒకే కమాండ్తో ఫుటర్ మొదటి కాలమ్ నుండి చివరి కాలమ్ వరకు విస్తరించాలని మీరు చెప్పవచ్చు. మీ కోడ్ శుభ్రంగా మరియు చదవడానికి సులభంగా మారుతుంది.
My advice:
• హెడర్లు లేదా బటన్లలో సాధారణ అలైన్మెంట్ కోసం Flexboxని ఉపయోగించండి. • ప్రధాన పేజీ లేఅవుట్లు మరియు సంక్లిష్టమైన గ్యాలరీల కోసం Gridని ఉపయోగించండి. • లేఅవుట్ సమస్యను పరిష్కరించడానికి కేవలం కంటైనర్లను నెస్టెడ్ (nesting) చేయడం ఆపండి. • స్పేస్ను సులభంగా పంపిణీ చేయడానికి fr యూనిట్ను ఉపయోగించండి.
ఈ రోజునే దీన్ని ప్రయత్నించండి. మీరు Flexboxతో నిర్మించిన పాత కాంపోనెంట్ను తీసుకోండి. దానిని CSS Grid ఉపయోగించి తిరిగి రాయండి. మీ కోడ్ చిన్నదిగా మరియు మీ లేఅవుట్లు మరింత బలంగా మారడాన్ని మీరు గమనిస్తారు.