CSS గ్రిడ్-అరేయా అట్రిబ్యూట్

పరిచయం మరియు ఉపయోగం

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

grid-area అమరిక గ్రిడ్ ప్రాజెక్టులకు పేరు ఇవ్వడానికి కూడా ఉపయోగించబడవచ్చు. తరువాత, గ్రిడ్ కంటైనర్ కు వచ్చే గ్రిడ్ ప్రాజెక్టు యొక్క అక్షమైన పరిమాణాలు మరియు గ్రిడ్ లేఆటలో స్థానాన్ని నిర్వహించడానికి ఉపయోగించబడుతుంది మరియు క్రింది అమరికల క్రింది అమరికల సరళీకృత రూపం ఉంటుంది: grid-template-areas అమరిక పేరుతో గ్రిడ్ ప్రాజెక్టులను అందించండి. క్రింది ఉదాహరణలను చూడండి.

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

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

ఉదాహరణ

ఉదాహరణ 1

మొదటి వరుస 2 పక్కన 1 మొదటి స్థానంలో "item1" ను ప్రదర్శించండి మరియు రెండు వరుసలను మరియు మూడు పక్కలను క్రిందకు వరుసలు మరియు పక్కలు పారస్పరం అనుసంధానించండి:

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

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

సూచన:పేజీ అంతంలో మరిన్ని ఉదాహరణలు లభిస్తాయి.

CSS సంకేతం

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

అమరిక విలువ

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

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

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

మరిన్ని ఉదాహరణలు

ఉదాహరణ 2

Item1 ను 'myArea' అని పేరు పెట్టి, ఐదు గదుల గ్రిడ్ లేఆఉట్ లో అన్ని ఐదు గదులను పొడిగించండి:

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

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

ఉదాహరణ 3

అన్ని 'myArea' ను ఐదు గదుల గ్రిడ్ లేఆఉట్ లో రెండు గదులు పొడిగించండి (పండుగల ప్రత్యక్షం కాకుండా లేని పేర్లు అని పరిగణించబడతాయి):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
}

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

ఉదాహరణ 4

అన్ని 'item1' ను రెండు గదులు మరియు రెండు పరిధులు పొడిగించండి:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

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

ఉదాహరణ 5

అన్ని పేర్లను పేర్కొని, ఒక పూర్తి వెబ్ మొడల్ను తయారు చేయండి:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

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

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

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

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