CSS Grid అంటే ఏమిటి?
CSS Grid Layout అనేది ఆధునిక బ్రౌజర్లలో అంతర్నిర్మిత రెండు-పరిమాణ లేఅవుట్ వ్యవస్థ. display: grid ఉపయోగించి గ్రిడ్ కంటైనర్ను నిర్వచించండి, తర్వాత grid-template-columns తో నిలువు వరుసలు మరియు grid-template-rows తో అడ్డు వరుసలు నియంత్రించండి. భిన్న యూనిట్లు (fr) అందుబాటులో ఉన్న స్థలాన్ని అనుపాతంలో పంచుతాయి. చైల్డ్ అంశాలు grid-column: span N మరియు grid-row: span N ఉపయోగించి బహుళ నిలువు లేదా అడ్డు వరుసలను వ్యాపించవచ్చు.
CSS Grid జనరేటర్ను ఎలా ఉపయోగించాలి
-
సంఖ్య ఇన్పుట్లు (ఒక్కొక్కటి 1–12) ఉపయోగించి నిలువు మరియు అడ్డు వరుసల సంఖ్యను సెట్ చేయండి.
-
పరిమాణాలు నియంత్రించడానికి grid-template-columns మరియు grid-template-rows సర్దుబాటు చేయండి (ఉదా: 1fr 2fr, 200px auto).
-
సెల్ల మధ్య అంతరం సెట్ చేయండి (ఉదా: 10px, 1rem).
-
ఎంచుకోవడానికి ప్రివ్యూలో ఏదైనా సెల్ క్లిక్ చేయండి (నారంజ రంగు అవుతుంది).
-
సెల్ స్పాన్ ప్యానెల్లో col-span మరియు row-span సెట్ చేయండి, తర్వాత వర్తించు క్లిక్ చేయండి. స్పానింగ్ సెల్లు పచ్చగా అవుతాయి.
-
అవుట్పుట్ ఫార్మాట్ మార్చడానికి CSS లేదా HTML ట్యాబ్ క్లిక్ చేయండి, తర్వాత క్లిప్బోర్డ్కు కాపీ చేయండి.
-
కొత్త 3×3 గ్రిడ్తో మళ్ళీ ప్రారంభించడానికి అన్నీ రీసెట్ చేయి క్లిక్ చేయండి.