CSS grid-template-rows అట్రిబ్యూట్

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

grid-template-rows గ్రిడ్ లేఆఉట్ లో పంక్తుల సంఖ్యను (మరియు పొడవును) నిర్ధారిస్తుంది.

విలువలు అంతరాయంలో వేరుచేయబడిన జాబితాలు. ప్రతి విలువ ప్రతి పంక్తి పొడవును నిర్ణయిస్తుంది.

మరింత సందర్శించండి:

CSS శిక్షణాత్మక మాలయాపనంCSS గ్రిడ్ లేఆఉట్

CSS సందర్శనాత్మక మాలయాపనంgrid-columns లక్షణం

CSS సందర్శనాత్మక మాలయాపనంgrid-template లక్షణం

ఉదాహరణ

పంక్తి పరిమాణాన్ని (పొడవు) నిర్ధారించండి:

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

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

CSS సంకేతబద్ధత

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

లక్షణపు విలువ

విలువ వివరణ
none పరిమాణం సెట్ చేయబడలేదు. అవసరమైనప్పుడు పంక్తులను సృష్టించండి.
auto పంక్తుల పరిమాణం కంటైనర్ పరిమాణం మరియు పంక్తిలో అంశాల పరిమాణం ఆధారంగా నిర్ణయించబడుతుంది.
max-content ప్రతి పంక్తిలోని పెద్దతమ అంశం ప్రకారం పంక్తుల పరిమాణాన్ని నిర్ణయించండి.
min-content ప్రతి పంక్తిలోని చిన్నతమ అంశం ప్రకారం పంక్తుల పరిమాణాన్ని నిర్ణయించండి.
length పరిమాణాన్ని అమర్చడానికి రాశి పొడవులను ఉపయోగించండి. దయచేసి ఈ ప్రకారం సందర్శించండి:పొడవు ఇకానా

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

మూల విలువ none
పారంత్రికత లేదు
అనిమేషన్ తయారీ: మద్దతు ఉంది. దయచేసి ఈ ప్రకారం సందర్శించండి:అనిమేషన్ సంబంధిత లక్షణాలు
వెర్షన్: CSS Grid Layout Module Level 1
జావాస్క్రిప్ట్ సంకేతబద్ధత object.style.gridTemplateRows="50px 200px"

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

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

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44