CSS Grid జనరేటర్

CSS Grid లేఅవుట్ పరిచయం

CSS Grid అనేది వెబ్ పేజీల కోసం రెండు డైమెన్షన్లలో (అడ్డు వరుసలు మరియు నిలువు వరుసలు) లేఅవుట్‌లను రూపొందించడానికి ఉపయోగపడే ఒక శక్తివంతమైన వ్యవస్థ. ఈ వ్యవస్థ ద్వారా వెబ్ డిజైనర్లు మరియు డెవలపర్లు క్లిష్టమైన వెబ్ పేజీ నిర్మాణాలను సులభంగా నియంత్రించవచ్చు. CSS Grid జనరేటర్ అనేది ఈ లేఅవుట్ ప్రక్రియను మరింత సులభతరం చేయడానికి ఉపయోగపడే ఒక విజువల్ సాధనం. దీని ద్వారా వినియోగదారులు కోడ్ రాయకుండానే గ్రిడ్ లేఅవుట్‌ను దృశ్యరూపంలో డిజైన్ చేయవచ్చు.

ఈ సాధనంలో కాలమ్‌లు మరియు రోస్ సంఖ్యను సెట్ చేయడం, వాటి పరిమాణాలను మార్చడం మరియు వాటి మధ్య ఖాళీలను (గ్యాప్స్) సర్దుబాటు చేయడం ద్వారా గ్రిడ్ రూపాన్ని నిర్ణయించవచ్చు. ఆ తర్వాత, గ్రిడ్ సెల్‌లపై మౌస్‌తో లాగడం (drag) ద్వారా ఐటమ్‌లను ఉంచవచ్చు. ఈ ప్రక్రియ పూర్తయిన వెంటనే, సాధనం దానికి సరిపోయే CSS మరియు HTML కోడ్‌ను స్వయంచాలకంగా జనరేట్ చేస్తుంది.

grid-template-columns మరియు grid-template-rows అవగాహన

గ్రిడ్ లేఅవుట్ నిర్మాణంలో grid-template-columns మరియు grid-template-rows అనేవి అత్యంత ముఖ్యమైన ప్రాపర్టీలు. ఇవి గ్రిడ్‌లోని నిలువు వరుసలు (columns) మరియు అడ్డు వరుసల (rows) సంఖ్యను, అలాగే వాటి పరిమాణాలను నిర్వచిస్తాయి.

CSS Grid జనరేటర్‌లో ఈ క్రింది ఇన్‌పుట్ పరిమితులు మరియు నియమాలు వర్తిస్తాయి:

• కాలమ్‌లు: 1 నుండి 12 వరకు సంఖ్యను సెట్ చేయవచ్చు.
• రోస్: 1 నుండి 12 వరకు సంఖ్యను సెట్ చేయవచ్చు.
• కాలమ్ పరిమాణాలు మరియు రో పరిమాణాలు: ప్రతి ట్రాక్‌కు ఒక స్వంత పరిమాణ పెట్టె ఉంటుంది. ఇందులో 1fr, 200px, auto, min-content, లేదా minmax(120px, 1fr) వంటి ఏదైనా చెల్లుబాటు అయ్యే CSS గ్రిడ్ విలువను టైప్ చేయవచ్చు.

ఒకవేళ ఇన్‌పుట్ ఫీల్డ్‌లో not-a-grid-track వంటి చెల్లని విలువను నమోదు చేస్తే, ఆ ఇన్‌పుట్ ఫీల్డ్ చెల్లనిదిగా గుర్తించబడుతుంది, కానీ CSS అవుట్‌పుట్ మాత్రం చివరిగా నమోదు చేసిన సరైన విలువనే కలిగి ఉంటుంది.

CSS Grid లో fr యూనిట్ మరియు repeat() వినియోగం

CSS Grid లో fr (fractional unit) అనేది ఒక ప్రత్యేకమైన కొలత ప్రమాణం. ఇది గ్రిడ్ కంటైనర్‌లో అందుబాటులో ఉన్న ఖాళీ స్థలాన్ని అనుకూల నిష్పత్తిలో పంచుకోవడానికి ఉపయోగపడుతుంది. ఉదాహరణకు, 1fr 2fr అని సెట్ చేస్తే, రెండవ కాలమ్ మొదటి కాలమ్ కంటే రెండింతలు పెద్దదిగా ఉంటుంది.

కోడ్‌ను సంక్షిప్తంగా ఉంచడానికి repeat() ఫంక్షన్ ఉపయోగపడుతుంది. CSS Grid జనరేటర్‌లో, ఒకే పరిమాణాన్ని పంచుకునే పక్కపక్క ట్రాక్‌లు అవుట్‌పుట్ CSS లో స్వయంచాలకంగా repeat() రూపంలోకి మార్చబడతాయి. దీనివల్ల కోడ్ పరిమాణం తగ్గి, చదవడానికి సులభంగా మారుతుంది.

column-gap మరియు row-gap లతో గ్రిడ్ గ్యాప్‌ల నిర్వహణ

గ్రిడ్‌లోని ఐటమ్‌ల మధ్య ఖాళీలను నిర్వహించడానికి గ్యాప్ ప్రాపర్టీలు ఉపయోగపడతాయి. ఈ సాధనంలో వీటిని క్రింది విధంగా సెట్ చేయవచ్చు:

• కాలమ్ గ్యాప్: 0 నుండి 48px వరకు విలువను సెట్ చేయవచ్చు.
• రో గ్యాప్: 0 నుండి 48px వరకు విలువను సెట్ చేయవచ్చు.

కాలమ్ గ్యాప్ మరియు రో గ్యాప్ విలువలను విడివిడిగా సెట్ చేసుకునే సదుపాయం ఉంది. అయితే, ఈ రెండు విలువలూ సమానంగా ఉన్నప్పుడు, అవి అవుట్‌పుట్ CSS లో విడివిడిగా కాకుండా ఒకే ఒక gap ప్రాపర్టీగా కుదించబడతాయి.

grid-column మరియు grid-row లతో ఐటమ్‌ల అమరిక

గ్రిడ్ కంటైనర్‌లో ఐటమ్‌లను ఉంచడానికి సెల్‌లపై నొక్కి లాగడం (drag) ద్వారా ఒక దీర్ఘచతురస్రాకార ప్రాంతాన్ని గుర్తించాలి. మౌస్ బటన్‌ను వదిలేసినప్పుడు, ఆ ప్రాంతంలో ఒక చైల్డ్ ఎలిమెంట్ సృష్టించబడుతుంది.

ఐటమ్‌ల అమరిక నియమాలు:

1. మీరు గీసే ప్రతి ఐటమ్‌కు CSS లో స్వంత grid-column మరియు grid-row రూల్, అలాగే HTML లో దానికి సరిపోయే div లభిస్తాయి.
2. ఐటమ్‌లు ఒకదానిపై ఒకటి రావచ్చు (overlap). ఇలా జరిగినప్పుడు, తర్వాత గీసిన ఐటమ్ పైన ఉంటుంది.
3. ఈ సాధనం గరిష్టంగా 16 ఐటమ్‌ల వరకు మాత్రమే మద్దతు ఇస్తుంది.
4. ఐటమ్‌ను తీసివేయడానికి దానిపై ఉన్న "×" గుర్తును ఉపయోగించవచ్చు.
5. "ఐటమ్‌లను క్లియర్ చేయి" అనే ఆప్షన్ క్లిక్ చేస్తే, HTML కంటైనర్ ఖాళీ చేయబడి, ఐటమ్‌ల సంఖ్య 0 అవుతుంది.
6. "ఐటమ్‌ను జోడించు" ద్వారా కొత్త HTML ఐటమ్‌ను జనరేట్ చేయవచ్చు.

సాధారణ లేఅవుట్ ప్యాటర్న్‌లు మరియు ప్రీసెట్‌లు

వినియోగదారులు వేగంగా లేఅవుట్‌లను రూపొందించడానికి ఈ సాధనం కొన్ని ముందే సిద్ధం చేసిన లేఅవుట్ ప్యాటర్న్‌లను (ప్రీసెట్‌లు) అందిస్తుంది. అవి:

• సైడ్‌బార్: వెబ్‌సైట్లలో సాధారణంగా ఉండే పక్కపక్కన ఉండే లేఅవుట్.
• హెడర్ & ఫుటర్: ఎగువన హెడర్, దిగువన ఫుటర్ మరియు మధ్యలో కంటెంట్ ఉండే లేఅవుట్.
• గ్యాలరీ: చిత్రాలు లేదా సమాచారాన్ని గ్రిడ్ రూపంలో ప్రదర్శించడానికి ఉపయోగపడుతుంది. ఈ గ్యాలరీ ప్రీసెట్ 3 కాలమ్‌లు, 2 రోస్ మరియు 3 ఐటమ్‌లను జనరేట్ చేస్తుంది.
• డ్యాష్‌బోర్డ్: విశ్లేషణలు మరియు విడ్జెట్‌లను అమర్చడానికి అనువైన క్లిష్టమైన లేఅవుట్.

డేటా ప్రాసెసింగ్ మరియు గోప్యత

ఈ సాధనాన్ని ఉపయోగించేటప్పుడు వినియోగదారుల గోప్యతకు ఎటువంటి భంగం కలగదు. మీ గ్రిడ్ లేఅవుట్ పూర్తిగా మీ బ్రౌజర్‌లోనే నిర్మించబడుతుంది. మీరు సాధనంలో సెట్ చేసే సమాచారం లేదా లేఅవుట్ వివరాలు ఏవీ BroBroGo కి అప్‌లోడ్ చేయబడవు.

---

తరచుగా అడిగే ప్రశ్నలు (FAQ)

గ్రిడ్‌పై ఐటమ్‌లను ఎలా ఉంచాలి?

ఒక దీర్ఘచతురస్రాన్ని గుర్తించడానికి సెల్‌లపై నొక్కి లాగండి — మీరు వదిలేసినప్పుడు అది ఆ కాలమ్‌లు మరియు రోస్‌లలో విస్తరించి ఉండే చైల్డ్ ఎలిమెంట్‌గా మారుతుంది. మీరు గీసే ప్రతి ఐటమ్‌కు CSSలో స్వంత grid-column మరియు grid-row రూల్ మరియు HTMLలో సరిపోయే div లభిస్తుంది. ఐటమ్‌లు ఒకదానిపై ఒకటి రావచ్చు, మరియు తర్వాత గీసినది పైన ఉంటుంది; ఐటమ్‌ను తీసివేయడానికి దానిపై ఉన్న × ని ఉపయోగించండి.

కాలమ్‌లు మరియు రోస్ వేర్వేరు పరిమాణాలలో ఉండవచ్చా?

అవును. ప్రతి ట్రాక్‌కు దాని స్వంత పరిమాణ పెట్టె ఉంటుంది, మరియు మీరు అక్కడ ఏదైనా గ్రిడ్ విలువను టైప్ చేయవచ్చు — 1fr, 200px, auto, min-content లేదా minmax(120px, 1fr). ఒకే పరిమాణాన్ని పంచుకునే ట్రాక్‌లు repeat() లోకి చేర్చబడతాయి, తద్వారా అవుట్‌పుట్ చిన్నదిగా ఉంటుంది. కాలమ్ గ్యాప్ మరియు రో గ్యాప్ విడిగా సెట్ చేయబడతాయి మరియు అవి ఒకేలా ఉన్నప్పుడు ఒకే గ్యాప్‌గా మారుతాయి.

జనరేట్ చేయబడిన కోడ్‌తో నేను ఏమి చేయాలి?

CSS మరియు HTMLలను పక్కపక్కనే కాపీ చేయండి. HTML మీకు ప్రతి ఐటమ్‌కు ఒక div ఉన్న కంటైనర్‌ను ఇస్తుంది మరియు CSS గ్రిడ్‌ను నిర్వచించి ప్రతి ఐటమ్‌ను అమరుస్తుంది. రెండింటినీ మీ ప్రాజెక్ట్‌లో పేస్ట్ చేయండి మరియు మీరు ఇక్కడ గీసిన లేఅవుట్‌ను పొందండి.