网格布局中 grid-template

grid-template

是 grid-template-areas， grid-template-rows 和 grid-template-columns 三个属性的简写，用以定义网格中的分区、行和列。

取值：

none：将 grid-template-rows , grid-template-columns , grid-template-areas 三个属性设置为关键字 none，意味着没有明确的网格，没有命名的网格区域。行和列将隐式生成, 他们的大小将由 grid-auto-rows 和 grid-auto-columns 属性决定。
```
/* Keyword value */
grid-template: none;
```
< grid-template-rows > / < grid-template-columns >：设置 grid-template-rows 和 grid-template-columns 指定的值，并设置 grid-template-areas 为 none 。
[ < line-names >? < string > < track-size >? < line-names >? ] + [ / < explicit-track-list > ]?：< line-names >是网格名称， < string >是 grid-template-areas的名称，< track-size > 是 grid-template-rows的值（无具体的值则设置成 auto ），然后按这种方式依次拼接。/ 后的 < explicit-track-list > 是 grid-template-columns 的值。
```
grid-template: [header-left] "head head" 30px [header-right][main-left]   "nav  main" 1fr  [main-right][footer-left] "nav  foot" 30px [footer-right]/ 120px 1fr;
```

上面代码将创建第一行的高度是30px ,第三行的高度是30px,中间行的高度填满剩余的高度；第一列宽度120px，剩下宽度填满剩余的列（第二列）。
举例：

html部分：

<div class="container"><header>Header</header><nav>Nav</nav><main>Main area</main><footer>Footer</footer></div>

css关键代码：

      .container {display: grid;height: 100vh;grid-template:[header-left] "head head" 50px [header-right][main-left] "nav main" 1fr [main-right][footer-left] "nav foot" 150px [footer-right]/ 180px 1fr;}header {grid-area: head;}nav {grid-area: nav;}main {grid-area: main;}footer {grid-column: foot;}

最终效果：

所有代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>grid demo</title><style>* {padding: 0;margin: 0;font-size: 28px;color: #fff;}.container {display: grid;height: 100vh;grid-template:[header-left] "head head" 50px [header-right] [main-left] "nav main" 1fr [main-right][footer-left] "nav foot" 150px [footer-right]/ 180px 1fr;}header {background-color: hotpink;grid-area: head;}nav {background-color: seagreen;grid-area: nav;}main {background-color: darkorange;grid-area: main;}footer {background-color: lightblue;grid-column: foot;}</style>
</head><body><div class="container"><header>Header ( 高50px ) </header><nav>Nav </br>( 高1fr )</br>( 宽 180px ) </nav><main>Main area( 高1fr , 宽1fr) </main><footer>Footer ( 高150px ) </footer></div>
</body></html>

网格布局中 grid-template相关推荐

网格布局（Grid）
概述 1.网格布局(Grid)是最强大的 CSS 布局方案. 2.它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. ...
CSS - 网格布局（grid）
目录什么是网格布局网格布局与弹性布局的比较网格布局中的概念名词网格容器 display:grid.display:inline-grid 网格轨道 grid-template-rows.gri ...
网格布局（grid layout）基础
1 网格grid基础 Grid布局是一种二维网格布局,有行和列的概念,可用于布局页面主要的区域或小型组件. 1.1 使用display: grid定义网格布局 1.2 显式网格(explicit gr ...
一篇文章搞懂CSS3网格布局（Grid）
一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
网格布局-display:grid
一,网格布局的概念,和flex布局的区别含义: 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局区别: Grid布局与Flex布局有一定的相似性,都可以指定容器内多个项目的位置 ...
Grid网格布局、Grid容器和Grid项目
1. Grid网格布局(基础知识) ①Grid容器(container)和项目(item) 采用grid网格布局的元素,称为Grid容器 display:grid|inline-grid; Grid容 ...
【图片版】CSS网格布局（Grid）完全教程
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
jqgrid使用本地静态数据创建网格的例子_什么是网格布局？grid布局有哪些优势？开发过程中遇到什么问题？...
链接:https://www.jianshu.com/p/d183265a8dad 目前浏览器还不支持Grid布局,IE10和IE11支持老的语法.如果你想体验Grid布局的强大,推荐使用开通过&qu ...
polished css,CSS3网格布局（grid）模板在线构建工具
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 const {render} = ReactDOM; const {Component, PropTypes ...
逆战班：网格布局（grid）
Grid 是一个二维的布局方法纵横两个方向同时存在使用display:grid 形成网格布局,将一个容器分成多分,网格可以进行多种组合网格有行与列之分,水平的为行(row),垂直的为列(colu ...

网格布局中 grid-template

grid-template

网格布局中 grid-template相关推荐

最新文章

热门文章