CSS గ్రిడ్ ఇంటిమ్
- పూర్వ పేజీ CSS గ్రిడ్ కంటైనర్
- తదుపరి పేజీ CSS ఉదాహరణ
子元素（项目）
网格容器包含网格项目。
默认情况下，容器在每一行的每一列都有一个网格项目，但是您可以设置网格项目的样式，让它们跨越多个列和/或行。
grid-column 属性：
grid-column 属性定义将项目放置在哪一列上。
ప్రాజెక్ట్ ప్రారంభ స్థానాన్ని మరియు ముగింపు స్థానాన్ని నిర్వచించవచ్చు.
注释：grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性。
కొన్ని ప్రాజెక్టును చేర్చడానికి, మీరు లైన్ నంబర్స్ (line numbers) ఉపయోగించవచ్చు లేదా "span" కీలకపదాన్ని ఉపయోగించి ఈ ప్రాజెక్టు ఎన్ని కలంలను కప్పివేయాలో నిర్ణయించవచ్చు.
ఉదాహరణ
మైఏరియా 1 ను మొదటి కలమ్ నుండి మొదలుపెడుతుంది మరియు 5 కలమ్ ముందు ముగుస్తుంది:
.item1 {
grid-column: 1 / 5;
}
ఉదాహరణ
మైఏరియా 1 ను మొదటి కలమ్ నుండి మొదలుపెడుతుంది మరియు 3 గిర్దాలు విస్తరిస్తుంది:
.item1 {
grid-column: 1 / span 3;
}
ఉదాహరణ
మైఏరియా 2 ను రైట్ కలమ్ నుండి మొదలుపెడుతుంది మరియు 3 గిర్దాలు విస్తరిస్తుంది:
.item2 {
grid-column: 2 / span 3;
}
grid-row ఆటోరిటీ:
grid-row ఆటోరిటీ ప్రాజెక్ట్ ను ఎంత వరుసలో ప్లేస్ చేయబడుతుందో నిర్వచిస్తుంది.
ప్రాజెక్ట్ ప్రారంభ స్థానాన్ని మరియు ముగింపు స్థానాన్ని నిర్వచించవచ్చు.
注释：grid-row గ్రిడ్ రో స్టార్ట్ మరియు గ్రిడ్ రో ఎండ్ ఆటోరిటీలను సరళీకరించడానికి ఆటోరిటీ ఉంది.
ప్రాజెక్ట్లను ప్లేస్ చేయడానికి, మీరు వరుస సంఖ్యను వినియోగించవచ్చు లేదా "span" అనే కీర్తికను వినియోగించి ఈ ప్రాజెక్ట్ ఎంత వరుసలు విస్తరించబడుతుందో నిర్వచించవచ్చు:
ఉదాహరణ
మైఏరియా 1 ను row-line 1 నుండి మొదలుపెడుతుంది మరియు row-line 4 వరకు ముగుస్తుంది:
.item1 {
grid-row: 1 / 4;
}
ఉదాహరణ
మైఏరియా 1 ను మొదటి వరుస నుండి మొదలుపెడుతుంది మరియు 2 వరుసలు విస్తరిస్తుంది:
.item1 {
grid-row: 1 / span 2;
}
grid-area ఆటోరిటీ
grid-area గ్రిడ్ రో స్టార్ట్, గ్రిడ్ కలమ్ స్టార్ట్, గ్రిడ్ రో ఎండ్ మరియు గ్రిడ్ కలమ్ ఎండ్ ఆటోరిటీలను సరళీకరించడానికి ఆటోరిటీ ఉంది.
ఉదాహరణ
మైఏరియా 8 ను row-line 1 మరియు column-line 2 నుండి మొదలుపెడుతుంది మరియు row-line 5 మరియు column line 6 వరకు ముగుస్తుంది:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
ఉదాహరణ
మైఏరియా 8 ను row-line 2 మరియు column-line నుండి మొదలుపెడుతుంది మరియు 2 వరుసలు మరియు 3 గిర్దాలు విస్తరిస్తుంది:
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
నామకరణ గ్రిడ్ ప్రాజెక్ట్
grid-area గ్రిడ్ ప్రాజెక్ట్ పేర్లను కూడా అనువర్తించవచ్చు.
గ్రిడ్ కన్టైనర్ ద్వారా పరిమితం చేయవచ్చు: grid-template-areas గ్రిడ్ ప్రాజెక్ట్ పేర్లను సూచించడానికి ఆటోరిటీ ఉంది.
ఉదాహరణ
item1 యొక్క పేరు "మైఏరియా" మరియు ఐదు గ్రిడ్ స్ట్రీమ్ లోని అన్ని ఐదు గ్రిడ్స్ లో విస్తరించబడుతుంది:
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'మైఏరియా మైఏరియా మైఏరియా మైఏరియా మైఏరియా';
}
每行由撇号（' '）定义。
每行中的列都在撇号内定义，并以空格分隔。
注释：పండుగల రాయలు గ్రిడ్ ప్రాజెక్టులు లేవు అని సూచిస్తాయి.
ఉదాహరణ
"myArea" గ్రిడ్ లేఆఉట్ లో మూడు గిర్డులు కాపురించడానికి చేయండి (పండుగల రాయలు ప్రాజెక్టులు లేవు అని సూచిస్తాయి):
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}
రెండు పంక్తులను నిర్వచించడానికి, మరొక కుట్టుతో రెండవ పంక్తిని నిర్వచించండి:
ఉదాహరణ
"item1" రెండు గిర్డు లో రెండు పంక్తులు కాపురించడానికి చేయండి:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}
ఉదాహరణ
అన్ని ప్రాజెక్టులను పేరుపెట్టి, ఏదైనా సమయంలో ఉపయోగించగల వెబ్ షేర్ తయారు చేయండి:
.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';
}
ప్రాజెక్ట్ల క్రమం
గ్రిడ్ లేఆఉట్ మానికి అనుమతిస్తుంది మానవులు ఇష్టపడే ఏదైనా స్థానంలో ప్రాజెక్ట్లను చేర్చవచ్చు.
HTML కోడ్ లోని మొదటి విషయం గ్రిడ్ లో మొదటి విషయంగా చూపబడకుండా ఉండకూడదు.
ఉదాహరణ
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
మీరు కొన్ని స్క్రీన్ పరిమాణాలను పునఃక్రమీకరించడానికి మీడియా క్వరీస్ ఉపయోగించవచ్చు:
ఉదాహరణ
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}
- పూర్వ పేజీ CSS గ్రిడ్ కంటైనర్
- తదుపరి పేజీ CSS ఉదాహరణ
