CSS grid-template అట్రిబ్యూట్
- ముంది పేజీ grid-row-start
- తరువాత పేజీ grid-template-areas
నిర్వచనం మరియు వినియోగం
grid-template అనే స్పష్టత అంశం క్రింది స్పష్టత అంశాలను సంక్షిప్తంగా సూచిస్తుంది:
మరింత చూడండి:
CSS పాఠ్యక్రమం:CSS గ్రిడ్ ప్రాజెక్ట్
CSS సంక్షిప్త పత్రిక:grid-area అనే స్పష్టత అంశం
CSS సంక్షిప్త పత్రిక:grid-template-rows అనే స్పష్టత అంశం
CSS సంక్షిప్త పత్రిక:grid-template-columns అనే స్పష్టత అంశం
CSS సంక్షిప్త పత్రిక:grid-template-areas అనే స్పష్టత అంశం
ఉదాహరణ
ఉదాహరణ 1
మొదటి నుంచి రెండవ రెండు కాలిపేట్లను అధికారికంగా సూచించిన రెండు కాలిపేట్లను చేయండి: 150 పిక్సెల్స్ అడుగున ఉన్నాయి:
.grid-container {
display: grid;
grid-template: 150px / auto auto auto;
}
ఉదాహరణ 2
రెండు పద్ధతులను నిర్ణయించి, "item1" అనేది మొదటి రెండు పద్ధతులలో మొదటి రెండు నిలువులను చేరుస్తుంది (ఐదు నిలువుల గ్రిడ్ లేఆఉట్ లో):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template:
'myArea myArea . . .'
'myArea myArea . . .';
}
ఉదాహరణ 3
అన్ని ప్రాజెక్టులను పేరు పెట్టి, ఒక ప్రస్తుత వెబ్ ట్యాంప్లేట్ తయారు చేయండి:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
}
CSS సంకేతపత్రం
grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
| విలువలు | వివరణ |
|---|---|
| none | అప్రమేయ విలువలు. పట్టిక లేదా పద్ధతి కలిగిన లేదు. |
| grid-template-rows / grid-template-columns | నిర్ణయించిన పద్ధతి కలిగిన పట్టిక మరియు పద్ధతులను నిర్ణయించండి. |
| grid-template-areas | నామకరణ ప్రాజెక్టులను ఉపయోగించి గ్రిడ్ లేఆఉట్ ఉపయోగించండి. |
| initial | ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. చూడండి: initial. |
| inherit | ఈ లక్షణాన్ని తన ముందటి ఎల్లిమెంట్ నుండి పారంతర్యం చేసుకుంది. చూడండి: inherit. |
సాంకేతిక వివరాలు
| అప్రమేయం విలువలు: | none none none |
|---|---|
| పారంతర్యం: | ఏ |
| అనిమేషన్ తయారీ: | మద్దతు. చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు. |
| సంస్కరణ: | CSS Grid Layout Module Level 1 |
| JavaScript సంకేతపత్రం: | object.style.gridTemplate="250px / auto auto" |
బ్రౌజర్ మద్దతు
పట్టికలోని సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న మొదటి బ్రౌజర్ సంస్కరణను పేర్కొంది.
| క్రోమ్ | IE / ఎడ్జ్ | ఫైర్ఫాక్స్ | సఫారీ | ఓపెరా |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- ముంది పేజీ grid-row-start
- తరువాత పేజీ grid-template-areas
