网格模板区 | grid-template-areas (Grid Layout) - CSS 中文开发手册 - Break易站
网格模板区 | grid-template-areas (Grid Layout) - CSS 中文开发手册
grid-template-areasCSS属性指定命名网格区域。
/* Keyword value */ grid-template-areas: none; /* <string> values */ grid-template-areas: "a b"; grid-template-areas: "a b b" "a c d"; /* Global values */ grid-template-areas: inherit; grid-template-areas: initial; grid-template-areas: unset;
这些领域不与任何特定的网格项目相关联,但可以从电网布局属性来引用grid-row-start,grid-row-end,grid-column-start,grid-column-end,和他们的速记grid-row,grid-column和grid-area。
初始值 | none |
---|---|
适用于 | 网格容器 |
遗传 | 没有 |
媒体 | 视觉 |
计算值 | 作为指定 |
动画类型 | 离散的 |
规范的顺序 | 形式语法定义的独特的非模糊顺序 |
语法
取值
none网格容器不定义任何指定的网格区域。
<string>+为列出的每个单独的字符串创建一行,并为字符串中的每个单元格创建一个列。行内和行之间的多个命名单元标记创建一个跨越相应网格单元的命名网格区域。除非这些单元格形成一个矩形,否则该声明是无效的。
形式语法
none | <string>+
例
HTML
<section id="page"> <header>Header</header> <nav>Navigation</nav> <main>Main area</main> <footer>Footer</footer> </section>
CSS
#page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; }
结果
规范
Specification | Status | Comment |
---|---|---|
CSS Grid LayoutThe definition of 'grid-template-areas' in that specification. | Candidate Recommendation | Initial definition |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57.01 | No support3 | 52.0 (52.0)2 | No support3 | 444 | 10.1 |
Feature | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 57.01 | 57.01 | 52.0 (52.0)2 | No support3 | 44 | 10.3 |