కొన్ని సంవత్సరాల క్రితం, నేను ఒక డాష్‌బోర్డ్‌ను రూపొందించడానికి కూర్చున్నాను. ఏమీ ప్రత్యేకంగా లేదు—కేవలం ఒక ఫిక్స్‌డ్ సైడ్‌బార్, ఒక మెయిన్ కంటెంట్ ఏరియా మరియు ఒక ఫుటర్. Flexbox అనేది సరైన ఎంపిక అనిపించింది, మొదట్లో అది సరిగ్గా పనిచేసింది. కానీ, నేను మెయిన్ సెక్షన్‌లో ఒక వరుస కార్డ్స్‌ను (cards) చేర్చగానే, మొత్తం లేఅవుట్ అస్తవ్యస్తమైపోయింది. flex-grow నిష్పత్తులు మరియు నెస్టెడ్ పర్సెంటేజ్ వెడల్పులతో (nested percentage widths) పోరాడుతూ నేను తదుపరి మూడు గంటలు గడిపాను; నేను ఎంత ప్యాడింగ్‌ను తగ్గించినా కంటైనర్లు లైన్ అలైన్ అవ్వడానికి నిరాకరించడం చూస్తూ ఉండిపోయాను. ఆ పేజీ ఎప్పుడైనా కూలిపోయే గోపురంలా అనిపించింది.

ఆ కష్టమైన అనుభవం నాకు ఆధునిక CSS లేఅవుట్ గురించి అత్యంత ముఖ్యమైన విషయాన్ని నేర్పింది: Flexbox మరియు Grid ప్రత్యర్థులు కాదు. అవి వేర్వేరు పనుల కోసం ఉపయోగించే సాధనాలు, మరియు చాలా వరకు విఫలమైన లేఅవుట్‌లు తప్పు సాధనాన్ని ఎంచుకోవడం వల్లనే జరుగుతాయి.

తేడా డైమెన్షనల్‌గా ఉంటుంది

Flexboxను ఒక కారిడార్‌లా ఊహించుకోండి. ఐటమ్స్ ఒకే దిశలో, అంటే ఒక వరుసలో (row) లేదా ఒక కాలమ్‌లో (column) ప్రవహిస్తాయి. ఇది వన్-డైమెన్షనల్ డిస్ట్రిబ్యూషన్ కోసం రూపొందించబడింది. బ్రౌజర్ కంటెంట్‌ను చూసి, ఆ సింగిల్ యాక్సిస్ (single axis) వెంబడి దానిని ఎలా సాగదీయాలి (stretch), కుదించాలి (shrink) లేదా అలైన్ చేయాలి అనేది నిర్ణయిస్తుంది. కంటెంట్ ఆధారంగా లేఅవుట్ మారే సందర్భాలలో Flexbox పర్ఫెక్ట్‌గా ఉంటుంది. నేవిగేషన్ బార్, ఫామ్ ఫీల్డ్స్ స్టాక్, లేదా సమానమైన స్పేసింగ్ కావాల్సిన ట్యాగ్‌ల సెట్—ఇవన్నీ ఒకే లాజిక్ లైన్‌ను కలిగి ఉంటాయి కాబట్టి ఫ్లెక్స్ కంటైనర్‌లో సహజంగా అమరిపోతాయి.

మరోవైపు, Grid అనేది ఒక ఫ్లోర్ ప్లాన్. ఇది ఖచ్చితంగా టూ-డైమెన్షనల్, అంటే వరుసలు (rows) మరియు కాలమ్స్‌ను (columns) ఒకేసారి హ్యాండిల్ చేస్తుంది. మీరు మొదట నిర్మాణాన్ని (structure) నిర్వచిస్తారు, ఆపై దాని లోపల ఐటమ్స్‌ను ఉంచుతారు. ఇది పేజీ యొక్క మొత్తం ఆర్కిటెక్చర్‌కు—అంటే వర్టికల్ మరియు హారిజంటల్ పొజిషనింగ్‌ను కలిపి నియంత్రించాల్సిన చోట—Gridను ఆదర్శవంతంగా చేస్తుంది. మీరు నెస్టెడ్ Flexbox కంటైనర్ల ద్వారా సంక్లిష్టమైన టూ-డైమెన్షనల్ డిజైన్‌ను బలవంతంగా చేయాలని ప్రయత్నించినప్పుడు, మీరు డీప్ మార్కప్ (deep markup), బలహీనమైన రాపర్లు (fragile wrappers) మరియు మీరు ఒక అదనపు ఎలిమెంట్‌ను జోడించిన వెంటనే విచ్ఛిన్నమయ్యే లెక్కలతో ఇబ్బంది పడతారు.

Flexbox ఇప్పటికీ తన ప్రాముఖ్యతను చాటుకుంటుంది

ప్రతి ఫ్లెక్స్ కంటైనర్‌ను Gridతో భర్తీ చేయాలని తొందరపడకండి. వ్యక్తిగత కాంపోనెంట్స్ (individual components) లోపల, Flexbox తరచుగా మరింత క్లీన్‌గా మరియు సరళంగా ఉంటుంది. మీ వద్ద రెండు బటన్లతో కూడిన కార్డ్ ఫుటర్ ఉండి, ఒకటి ఎడమ వైపున మరియు మరొకటి కుడి వైపున అలైన్ చేయాలనుకుంటే, justify-content: space-between మీరు అనుకున్నది సరిగ్గా చేస్తుంది. తెలియని ఎత్తు ఉన్న బటన్ లోపల ఒక ఐకాన్‌ను వర్టికల్‌గా సెంటర్ చేయాలనుకుంటే, align-items: center అనేది అత్యంత సులభమైన మార్గం. వేరియబుల్ కంటెంట్—ఉదాహరణకు వేర్వేరు పేరు పొడవులతో ఉన్న యూజర్ బ్యాడ్జ్‌ల వరుస—Flexboxలో సౌకర్యవంతంగా సరిపోతుంది, ఎందుకంటే ఇది కంటెంట్-ఫస్ట్ (content-first). కంటైనర్ అందులో ఉన్న దానిని బట్టి తనను తాను సర్దుబాటు చేసుకుంటుంది.

Grid అనేది కంటైనర్-ఫస్ట్ (container-first). ఎన్ని ట్రాక్స్ (tracks) ఉన్నాయి మరియు అవి ఎంత పరిమాణంలో ఉండాలో మీరు బ్రౌజర్‌కు చెబుతారు, ఆపై ఆ సెల్స్‌లోకి ఐటమ్స్‌ను వేస్తారు. మీ లేఅవుట్ కేవలం స్పేస్‌ను పంచుకునే ఒకే ఒక వరుస ఐటమ్స్ అయితే, Grid అనవసరమైన సంక్లిష్టతను పెంచుతుంది.

పేజీ లేఅవుట్ కోసం Grid ఉత్తమం

ఇక్కడే Grid తన పట్టు సాధిస్తుంది. నా డాష్‌బోర్డ్ పీడకల గుర్తుందా? నిర్మాణం మొదట నుండి ఎలా ఉండాలో ఇక్కడ చూడండి:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

ఇక్కడ ఏం జరుగుతుందో చూడండి. .page కంటైనర్ మూడు వరుసలు మరియు రెండు కాలమ్స్‌ను ఏర్పాటు చేస్తుంది. మొదటి వరుస auto కారణంగా హెడర్‌లో ఉన్న కంటెంట్‌కు అనుగుణంగా తన పరిమాణాన్ని నిర్ణయించుకుంటుంది. మధ్య వరుస 1fr తో అందుబాటులో ఉన్న మిగిలిన ఖాళీని ఆక్రమిస్తుంది. ఫుటర్ చివరి వరుసలో దాని స్వంత కంటెంట్‌కు అనుగుణంగా అమరుతుంది. ఈలోపు, సైడ్‌బార్ 200 పిక్సెల్‌ల వెడల్పుతో లాక్ చేయబడుతుంది మరియు మెయిన్ ఏరియా మిగిలిన భాగాన్ని నింపుతుంది.

ప్లేస్‌మెంట్ లాజిక్ (placement logic) నిజమైన ఉపశమనం. హెడర్ కాలమ్ లైన్ 1 నుండి లైన్ -1 వరకు విస్తరించి ఉంటుంది, అంటే మీరు తర్వాత ఎన్ని కాలమ్స్ జోడించినా అది రెండు కాలమ్స్ అంతటా విస్తరిస్తుంది. సైడ్‌బార్ మరియు మెయిన్ కంటెంట్ వరుస 2ను పంచుకుంటాయి కానీ వేర్వేరు కాలమ్స్‌లో ఉంటాయి. ఫుటర్ వరుస 3లో పూర్తి వెడల్పును పొందుతుంది. మీరు చైల్డ్ ఎలిమెంట్స్‌పై పర్సెంటేజ్ లెక్కలు చేయాల్సిన అవసరం లేదు. ఎత్తు కోసం పోరాడే నెస్టెడ్ రాపర్లు అవసరం లేదు. సైడ్‌బార్ వెడల్పును ఒకే చోట మారిస్తే, మెయిన్ ఏరియా ఆటోమేటిక్‌గా సర్దుబాటు అవుతుంది. మొత్తం లేఅవుట్ ఒకే వ్యవస్థలా సమన్వయంతో పనిచేస్తుంది.

grid-template-areas తో స్పష్టత

మరింత స్పష్టత కోసం, మీరు మీ సెక్షన్‌లకు పేర్లు పెట్టుకోవచ్చు. లైన్ నంబర్లను నిర్వహించడానికి బదులుగా, మీరు ఒక విజువల్ మ్యాప్‌ను రాస్తారు:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

ఇప్పుడు మీ స్టైల్‌షీట్ ఒక వైర్‌ఫ్రేమ్‌లా కనిపిస్తుంది. వేరే బ్రేక్‌పాయింట్ (breakpoint) కోసం సైడ్‌బార్ కుడి వైపున కనిపించాలని మీరు అనుకుంటే, టెంప్లేట్ స్ట్రింగ్‌లో రెండు పదాలను మార్చితే సరిపోతుంది. నెస్టెడ్ ఫ్లెక్స్ కంటైనర్ల సమూహం లోపల అటువంటి నిర్మాణాత్మక స్పష్టతను సాధించడం అసాధ్యం.

రెండు కఠినమైన పాఠాలు

Grid అనేది మ్యాజిక్ కాదు. మీ లేఅవుట్‌ను త్వరగా పాడుచేసే రెండు తప్పులు ఉన్నాయి.

మొదటిది అజాగ్రత్తగా యూనిట్లను ఉపయోగించడం. మీరు grid-template-columns: 1fr 1fr 1fr అని నిర్వచించినప్పటికీ, మీ డిజైన్‌కు కేవలం రెండు కాలమ్స్ మాత్రమే అవసరమైతే, ఆ మూడవ ట్రాక్ ఇంకా ఉంటుంది. అది ఖాళీగా ఉండి మీరు ఊహించని గ్యాప్‌ను సృష్టించవచ్చు, లేదా మీ అసలు కంటెంట్‌ను డిజైన్‌ను దెబ్బతీసే విధంగా కుదించవలసి వస్తుంది. స్పష్టమైన ఉద్దేశంతో ఉండండి. మీకు రెండు కాలమ్స్ కావాలనుకున్నప్పుడు, repeat(2, 1fr) అని రాయండి.