CSS grid-column-end అట్రిబ్యూట్

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

grid-column-end లక్షణం విషయం ఎక్కువ స్తంభాలు పొడిగించుతుంది లేదా విషయం ఏ స్తంభలోని కలిపి కలిగిన విలువను అంటే కలిపి కలిగిన స్తంభంలో ముగిస్తుంది.

పేజీ ముగింపులో ఉన్న ఉదాహరణను చూడండి.

మరియు ఇంకా ఈ కి సందర్శించండి:

CSS శిక్షణా పద్ధతి:CSS గ్రిడ్ లేఆఉట్

ప్రతిమానికి వివరణ

ఉదాహరణ 1

మీ "item1" ను మూడు స్తంభాలు పొడిగించండి:

.item1 {
  grid-column-end: span 3;
}

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

ఉదాహరణ 2

మీరు పొడిగించాలని స్తంభాల సంఖ్యను వినియోగించవచ్చు కానీ కలిపి కలిగించబడిన విలువను ఉపయోగించవచ్చు:

.item1 {
  grid-column-end: 3;
}

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

CSS సంకేతాలు

grid-column-end: auto|span n|column-line;

లక్షణ విలువ

విలువ వివరణ
auto అప్రమేయ విలువ. విషయం ఒక స్తంభం పొడిగించు.
span n విషయం పొడిగించే నిర్దేశించబడే స్తంభాల సంఖ్య.
column-line ప్రదర్శించబడే విషయాన్ని ఎక్కువ స్థానంలో నిలిచే నిర్దేశించు.

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

అప్రమేయ విలువ: auto
వారిష్ట్యం: సంఖ్యలు ఉండదు
అనిమేషన్ తయారీ: మద్దతు ఉంది. దయచేసి ఈ కి సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు.
సంస్కరణ: CSS Grid Layout Module Level 1
జావాస్క్రిప్ట్ సంకేతాలు: object.style.gridColumnEnd="5"

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

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

క్రోమ్ IE / ఎంజెల్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
57 16 52 10 44