CSS గ్రిడ్-కలన్ అట్రిబ్యూట్

నిర్వచనం మరియు ఉపయోగం

grid-column అంశం గ్రిడ్ ప్రాజెక్టు పరిమాణాన్ని మరియు గ్రిడ్ లేఆట్ లో స్థానాన్ని నిర్ణయిస్తుంది; ఇది క్రింది అంశాల సరళీకృత అంశం ఉంది:

మరియు చూడండి:

CSS పాఠ్యక్రమం:CSS గ్రిడ్ లేఆట్

ఉదాహరణ

ఉదాహరణ 1

ఇటిమ్1 ను క్రమం 1 నుండి ప్రారంభించి రెండు నిలువులు అన్నిటికి అనుగుణంగా ప్రదర్శించండి:

.item1 {
  grid-column: 1 / span 2;
}

స్వయంగా ప్రయత్నించండి

ఉదాహరణ 2

మీరు క్రమాంకం విలువను క్రమాంకం విలువలో ఉండే అనుగుణంగా ప్రదర్శించండి విధంగా ఉపయోగించవచ్చు:

.item1 {
  grid-column: 1 / 3;
}

స్వయంగా ప్రయత్నించండి

CSS సంకేతబద్ధత

grid-column: grid-column-start / గ్రిడ్-కలమ్-ఎండ్;

అంశం విలువ

విలువ వివరణ
grid-column-start ప్రాజెక్టును ఎలాగైనా ప్రదర్శించాలో ఎలాగైనా నిర్ణయించండి.
గ్రిడ్-కలమ్-ఎండ్ ప్రాజెక్టును ఎలాగైనా ప్రదర్శించాలో లేదా ఎన్ని నిలువులు అన్నిటికి అనుగుణంగా ప్రదర్శించాలో నిర్ణయించండి.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: auto / auto
పారంతర్యం: లేదు
అనిమేషన్ తయారీ: మద్దతు. దయచేసి చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు。
సంస్కరణం: CSS Grid Layout Module Level 1
జావాస్క్రిప్ట్ సంకేతబద్ధత object.style.gridColumn="2 / span 2"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

క్రోమ్ ఐఇ మరియు ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
57 16 52 10 44