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

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

grid-template-columns లక్షణం గ్రిడ్ లేఆట్లో కుళాయి సంఖ్యను (మరియు పరిమాణాన్ని) నిర్ణయిస్తుంది.

ఈ విలువలు వరుసగా వేరుచేసి వచ్చే జాబితా అనికి వస్తాయి, ప్రతి విలువ సంబంధిత కుళాయి పరిమాణాన్ని నిర్ణయిస్తుంది.

మరింత చూడండి:

CSS శిక్షణాలుCSS గ్రిడ్ లేఆట్

CSS సూచనాలుgrid-template-rows లక్షణం

CSS సూచనాలుgrid-template లక్షణం

ఉదాహరణ

ఉదాహరణ 1

నాలుగు కుళాయిల గ్రిడ్ కన్టైనర్ తయారు చేయండి:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

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

ఉదాహరణ 2

నాలుగు కుళాయిల గ్రిడ్ లేఆట్ తయారు మరియు ప్రతి కుళాయి పరిమాణాన్ని నిర్ణయించండి:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

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

CSS విధానం

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

లక్షణ విలువ

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

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

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

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

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

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