CSS grid-template 属性 详解
css3基础 2022-07-14 16:29:0113小码哥的IT人生shichen
CSS grid-template 属性
定义和用法
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; }
完整实例【亲自试一试】:
<!DOCTYPE html> <html> <head> <style> .grid-container { display: grid; grid-template: 150px / auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>grid-template 属性</h1> <p>grid-template 属性可用作 <em>grid-template-rows</em> 和 <em>grid-template-columns</em> 属性的简写属性。</p> <p>这个网格布局有三列,而且第一行是 150px 高:</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
例子 2
规定两行,其中 "item1" 横跨前两行中的前两列(在一个五列网格布局中):
.item1 { grid-area: myArea; } .grid-container { display: grid; grid-template: 'myArea myArea . . .' 'myArea myArea . . .'; }
完整实例【亲自试一试】:
<!DOCTYPE html> <html> <head> <style> .item1 { grid-area: myArea; } .grid-container { display: grid; grid-template: 'myArea myArea . . .' 'myArea myArea . . .'; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>grid-template 属性</h1> <p>grid-template 属性还可以使用命名的网格项目来规定行/列。</p> <p>如需规定两行,请设置更多序列。</p> <p>每行由撇号(' ')定义。</p> <p>"myArea" 将在前两行中横跨前两列:</p> <div class="grid-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> <div class="item5">5</div> <div class="item6">6</div> <div class="item7">7</div> <div class="item8">8</div> <div class="item9">9</div> <div class="item10">10</div> <div class="item11">11</div> <div class="item12">12</div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
例子 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'; }
完整实例【亲自试一试】:
<!DOCTYPE html> <html> <head> <style> .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 footer'; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } </style> </head> <body> <h1>A Webpage Template</h1> <p>您可以使用 <em>grid-area</em> 属性来命名网格项目。</p> <p>通过在网格容器上使用 <em>grid-template</em>属 性,可以在设置网格布局时引用该名称。</p> <p>这个网格布局包含六列三行:</p> <div class="grid-container"> <div class="item1">Header</div> <div class="item2">Menu</div> <div class="item3">Main</div> <div class="item4">Right</div> <div class="item5">Footer</div> </div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html
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" |
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
57 | 16 | 52 | 10 | 44 |