Kituo cha kina cha CSS grid-template-columns
- upage grid-template-areas
- mpage grid-template-rows
dingyi he yongfa
grid-template-columns shuxing zhiding wangge lüoutu zhong de lie shu (he kuandu).
Zhexie zhi shi yige yong kongge fenbie de liebiao, qingzhong meige zhi zhidingxiang lie de chizi.
Ling qing cankao:
CSS jiaocheng:CSS wangge lüoutu
CSS cankao shoucegrid-template-rows shuxing
CSS cankao shoucegrid-template shuxing
shili
li
Zuozhiza yige si lie de wangge rongqi:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
li
Zuozhiza yige si lie de wangge lüoutu, bing guading meige lie de chizi:
.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}
CSS yufa
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
shuxingzhi
| zhi | miaoshu |
|---|---|
| none | morenzhi. Zai xuyao shi neicheng lie. |
| auto | Lie de chizi zidingyuan yu rongqi de daozhi yu lie zhong xiangmu neirong de daozhi. |
| max-content | Genju lie zhong zuidah de xiangmu shezhi meiguo de chizi. |
| min-content | Genju lie zhong zuixiao de xiangmu shezhi meiguo de chizi. |
| length | Shezhi lie de chizi, tongguo shiyong legal de changdu zhi. Cankaochangdu danwei. |
| initial | Jiang this shuxing shezhiwei tamen de morenzhi. Cankao initial. |
| inherit | Cong qiji yuanziding chuanji this shuxing. Cankao inherit. |
jishu xixi
| morenzhi: | none |
|---|---|
| jicheng: | fu |
| donghua zuozuo: | support. Qing cankao:donghua xiangguan shuxing. |
| banben: | CSS Grid Layout Module Level 1 |
| JavaScript yufa: | object.style.gridTemplateColumns="50px 50px 50px" |
browser support
数字 diandiaozhong de shuzi zhongmingzhile wanshichangzhi zhe ge shuxing de diyi ge liulanqi banben.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- upage grid-template-areas
- mpage grid-template-rows
