CSS Grid జనరేటర్
మీ కాలమ్లు మరియు రోస్లను సెట్ చేయండి, ఐటమ్లను ఉంచడానికి సెల్లపై లాగండి మరియు ఒకే క్లిక్తో సరిపోయే HTMLతో పాటు గ్రిడ్ CSSని కాపీ చేయండి.
మీ గ్రిడ్ నేరుగా మీ బ్రౌజర్లోనే నిర్మించబడుతుంది. మీ సమాచారం ఏదీ BroBroGo కి అప్లోడ్ చేయబడదు.
తరచుగా అడిగే ప్రశ్నలు
గ్రిడ్పై ఐటమ్లను ఎలా ఉంచాలి?
ఒక దీర్ఘచతురస్రాన్ని గుర్తించడానికి సెల్లపై నొక్కి లాగండి — మీరు వదిలేసినప్పుడు అది ఆ కాలమ్లు మరియు రోస్లలో విస్తరించి ఉండే చైల్డ్ ఎలిమెంట్గా మారుతుంది. మీరు గీసే ప్రతి ఐటమ్కు CSSలో స్వంత grid-column మరియు grid-row రూల్ మరియు HTMLలో సరిపోయే div లభిస్తుంది. ఐటమ్లు ఒకదానిపై ఒకటి రావచ్చు, మరియు తర్వాత గీసినది పైన ఉంటుంది; ఐటమ్ను తీసివేయడానికి దానిపై ఉన్న × ని ఉపయోగించండి.
కాలమ్లు మరియు రోస్ వేర్వేరు పరిమాణాలలో ఉండవచ్చా?
అవును. ప్రతి ట్రాక్కు దాని స్వంత పరిమాణ పెట్టె ఉంటుంది, మరియు మీరు అక్కడ ఏదైనా గ్రిడ్ విలువను టైప్ చేయవచ్చు — 1fr, 200px, auto, min-content లేదా minmax(120px, 1fr). ఒకే పరిమాణాన్ని పంచుకునే ట్రాక్లు repeat() లోకి చేర్చబడతాయి, తద్వారా అవుట్పుట్ చిన్నదిగా ఉంటుంది. కాలమ్ గ్యాప్ మరియు రో గ్యాప్ విడిగా సెట్ చేయబడతాయి మరియు అవి ఒకేలా ఉన్నప్పుడు ఒకే గ్యాప్గా మారుతాయి.
జనరేట్ చేయబడిన కోడ్తో నేను ఏమి చేయాలి?
CSS మరియు HTMLలను పక్కపక్కనే కాపీ చేయండి. HTML మీకు ప్రతి ఐటమ్కు ఒక div ఉన్న కంటైనర్ను ఇస్తుంది మరియు CSS గ్రిడ్ను నిర్వచించి ప్రతి ఐటమ్ను అమరుస్తుంది. రెండింటినీ మీ ప్రాజెక్ట్లో పేస్ట్ చేయండి మరియు మీరు ఇక్కడ గీసిన లేఅవుట్ను పొందండి.