CSS - grid-template 属性



CSS grid-template 属性指定网格布局的网格列、网格行和网格区域。该属性是各个网格相关属性的简写:grid-template-areasgrid-template-columnsgrid-template-rows

语法

grid-template: none | grid-template-rows / grid-template-columns | grid-template-areas | initial | inherit;

属性值

描述
none 未设置列和行的特定大小。默认值。
grid-template-rows / grid-template-columns 它指定行和列的大小。
grid-template-area 它使用命名网格项定义网格布局。
initial 这将属性设置为其默认值。
inherit 这从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 网格模板属性示例

以下示例使用不同的值解释了 grid-template 属性。

使用 None 值的网格模板属性

为了不具有任何预定义的行、列或区域,我们使用 none 值,它表示未定义显式网格模板。网格将根据网格项的内容和布局自动调整。这在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: lightgrey; grid-gap: 10px; padding: 20px; grid-template: none; } .container>div { padding: 10px; text-align: center; color: white; border: 3px solid blue; background-color: #4775d1; } </style> </head> <body> <h2> CSS grid-template property </h2> <h4> grid-template: none </h4> <div class=" container container1"> <div> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> </div> </body> </html>

用于行和列的网格模板属性

要定义网格布局中行和列的大小,我们将行的高度和列的宽度(用“/”分隔)指定给 grid-template 属性。“/”之前的指定大小数量表示行数,“/”之后的指定大小数量表示列数。这些在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .container { display: grid; height: 200px; background-color: lightgrey; grid-gap: 20px; padding: 10px; } .container1 { grid-template: 120px 60px / auto auto auto; } .container2 { grid-template: 100px 60px / 160px 130px 160px; } .container>div { padding: 10px; text-align: center; color: white; border: 3px solid blue; background-color: #4775d1; } </style> </head> <body> <h2> CSS grid-template property </h2> <p> <strong> grid-template: 120px 60px / auto auto auto (2 rows and three columns) </strong> ; the first row is 120px high and second row is 60px high, the width of the columns has been set to auto and thus depends on the content. </p> <div class=" container container1"> <div> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> <div> Item-5 </div> <div> Item-6 </div> </div> <p> <strong> grid-template: 100px 60px / 160px 130px 160px (2 rows and three columns) </strong> ; the first row is 100px high and second row is 60px high, the first column is 160px wide, second column is 130px wide, third column is 160px wide. </p> <div class="container container2"> <div> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> <div> Item-5 </div> <div> Item-6 </div> </div> </body> </html>

使用命名网格项的网格模板属性

要定义网格容器内的命名网格区域,我们将使用单引号 '' 指定行,并在其中使用名称数量指定列到 grid-template 属性。元素需要使用单引号中的名称来引用布局的一部分。这在以下示例中显示。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <style> .container { display: grid; background-color: lightgrey; grid-gap: 10px; padding: 20px; } .container>div { padding: 20px; text-align: center; color: white; border: 3px solid blue; background-color: #4775d1; } .container1 { grid-template: 'header header header header' 'sidebar content content content' 'footer footer footer footer'; } .container2 { grid-template: 'item item ..' 'item item..'; } .cont1-item1 { grid-area: header; } .cont1-item2 { grid-area: sidebar; } .cont1-item3 { grid-area: content; } .cont1-item4 { grid-area: footer; } .cont2-item1 { grid-area: item; } </style> </head> <body> <h2> CSS grid-template property </h2> <p> <strong> grid-template: 'header header header header' 'sidebar content content content' 'footer footer footer footer' </strong> ; The layout has three rows indicated by three different apostrophes' ' and four columns indicated by the number of items inside apostrophes ' ' </p> <div class=" container container1"> <div class="cont1-item1"> This is header </div> <div class="cont1-item2"> This is sidebar </div> <div class="cont1-item3"> This is content </div> <div class="cont1-item4"> This is footer </div> </div> <p> <strong> grid-template: 'item item . .''item item . .' </strong> ; item1 takes two rows indicated by two separate apostrophes ' ' and 4 columns indicated by the number of items inside apostrophes ' '</p> <div class=" container container2"> <div class="cont2-item1"> Item-1 </div> <div> Item-2 </div> <div> Item-3 </div> <div> Item-4 </div> <div> Item-5 </div> <div> Item-6 </div> </div> </body> </html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
grid-template 57 16 52 10 44
css_properties_reference.htm
广告