layout (grid)

查看文档做个 PC 布局

<body>
  <div class="container">
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="footer">footer</div>
  </div>
</body>

.container {
  height: 100vh;
  background: #ddd;
  display: grid;  /* grid 布局 */
  grid-template-columns: 10% auto 10%;   /* 列的设置 */
  grid-template-rows: 50px auto 50px;  /* 行的设置 */
  grid-template-areas:  /* 网格区域的设置 */
    "header header header"
    ". main aside"
    "footer footer footer";
}

.header {
  grid-area: header;  /* 对应元素填入网格 */
  background: lightblue;
}

.main {  
  grid-area: main;  /* 对应元素填入网格 */
  background: lightpink;
}

.aside {
  grid-area: aside;  /* 对应元素填入网格 */
  background: lightgreen;
}

.footer {
  grid-area: footer;  /* 对应元素填入网格 */
  background: lightblue;
}

container 定义grid-template-areas:，items 用grid-area:来给元素做定位

container 属性	值 / 描述
`display:`	grid \| inline-grid \| subgrid
`grid-template-columns:`	<track-size> ... \| <line-name> <track-size> ...
`grid-template-row:`	<track-size> ... \| <line-name> <track-size> ...
`grid-template-areas:`	<grid-area-name> \| . (表示为空单元) \| none (没定义网格区域)

items 属性	值
`grid-area:`	<grid-area-name>

下面我们来看看第二种写法

.container {
  height: 100vh;
  background: #ddd;
  display: grid;
  grid-template:   /* 第二种写法 */
    "header header header" 50px
    ". main aside" auto
    "footer footer footer" 50px
    / 10% auto 100px;
}

.header {
  grid-area: header;
  background: lightblue;
}

.main {
  grid-area: main;
  background: lightpink;
}

.aside {
  grid-area: aside;
  background: lightgreen;
}

.footer {
  grid-area: footer;
  background: lightblue;
}

container 属性	值 / 描述
`grid-template:`	`grid-template-rows`,`grid-template-columns`,`grid-template-areas`的简写

如何产生间距的宽度

.container {
  height: 100vh;
  background: #ddd;
  display: grid;
  grid-template:  
    "header header header" 50px
    ". main aside" auto
    "footer footer footer" 50px
    / 10% auto 100px;

  grid-column-gap: 10px;  /* 列间距的宽度 */
  grid-row-gap: 10px;  /* 行间距的宽度 */
}

.header {
  grid-area: header;
  background: lightblue;
}

.main {
  grid-area: main;
  background: lightpink;
}

.aside {
  grid-area: aside;
  background: lightgreen;
}

.footer {
  grid-area: footer;
  background: lightblue;
}

行和列之间添加空隙，这里只在中间添加，边缘没有
http://js.jirengu.com/zenul/1/edit?css,output

container 属性	值 / 描述
`grid-column-gap:`	列之间间距的宽度
`grid-row-gap:`	行之间间距的宽度
`grid-gap:`	`grid-row-gap` 和 `grid-column-gap` 的缩写

如何实现元素的位置变化

.container {
  height: 100vh;
  background: #ddd;
  display: grid;
  grid-template:  
    "header header header" 50px
    ". main aside" auto
    "footer footer footer" 50px
    / 10% auto 100px;

  grid-column-gap: 10px;  
  grid-row-gap: 10px;  
}

.header {
  grid-area: header;
  background: lightblue;

  display: grid;  /* 嵌套一个 grid 布局 */
  justify-items: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}

.main {
  grid-area: main;
  background: lightpink;
}

.aside {
  grid-area: aside;
  background: lightgreen;
}

.footer {
  grid-area: footer;
  background: lightblue;
}

header 中元素垂直水平居中
http://js.jirengu.com/zenul/3/edit?css,output

container 属性 / 父元素属性	值 / 描述
`justify-items:`	start \| end \| center \| stretch
`align-items:`	start \| end \| center \| stretch

如何实现整体的位置变化

.container {
  height: 100vh;
  background: #ddd;
  display: grid;
  grid-template:
    "header header header" 50px
    ". main aside" auto
    "footer footer footer" 50px
    / 10% 400px 100px;
  
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  
  justify-content: center;  /* 整体位置水品居中 */
}

.header {
  grid-area: header;
  background: lightblue;
}

.main {
  grid-area: main;
  background: lightpink;
}

.aside {
  grid-area: aside;
  background: lightgreen;
}

.footer {
  grid-area: footer;
  background: lightblue;
}

当宽度不占满页面时，水品居中所有内容
http://js.jirengu.com/zenul/2/edit?css,output

container 属性	值 / 描述
`justify-content:`	start \| end \| center \| stretch \| space-around \| space-between \
	space-evenly
`align-content:`	start \| end \| center \| stretch \| space-around \| space-between \
	space-evenly

另一种定位方式

用网格线定位

.container {
  height: 100vh;
  background: #ddd;
  display: grid;
  grid-template-columns: 60px 60px; 
  grid-template-rows: 90px 90px;
  /* 定义了四个格子 */
  
  grid-auto-columns: 60px;
  grid-auto-rows: 90px;
  /* 定义隐式轨道的宽度 */
}

.item-a {
  background: lightgreen;
  grid-column: 1 / 2; 
  grid-row: 2 / 3;
   /* 用网格线做定位 */
}

.item-b {
  background: lightblue;
  grid-column: 4 / 5;
  grid-row: 3 / 4;
  /* 超出定义的四个网格，所以有上面隐式轨道宽度的设置 */
}

http://js.jirengu.com/soyek/1/edit?css,output

container 属性	值 / 描述
`grid-auto-columns:`	定义隐式`列`轨道的宽度
`grid-auto-rows:`	定义隐式`行`轨道的宽度

items 属性	描述
`grid-column:`	网格线定义`列`位置
`grid-row:`	网格线定义`行`位置

未指明位置的块自动排列

.container {
  background: #ddd;
  display: grid;
  grid-template-columns: repeat(5, 60px);
  grid-template-rows: 30px 30px;
  
  /* grid-auto-flow: column; */
}

.item:first-child {
  background: lightgreen;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item:last-child {
  background: lightblue;
  grid-column: 5;
  grid-row: 1 / 3
}

.item:nth-child(2) {
  background: yellow;
}

.item:nth-child(3) {
  background: orange;
}

.item:nth-child(4) {
  background: purple;
}

试着给container添加grid-auto-flow: column;看看变化
http://js.jirengu.com/fajuho/1/edit?css,output

container 属性	值 / 描述
`grid-auto-flow:`	row \| column \| row dense \| column dense

grid 等价写法

.container {
  grid: 200px auto / 1fr auto 1fr;
}

等价于

.container {
  grid-template-rows: 200px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

.container {
  grid: column 1fr / auto;
}

等价于

.container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等价于

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

grid items 属性

items 属性	描述
`grid-column-start:`
`grid-column-end:`
`grid-column:`	上面两个的简写
`grid-row-start:`
`grid-row-end:`
`grid-row:`	上面两个的简写
`justify-self:`	水平居中，start \| end \| center \| stretch
`align-self:`	垂直居中，start \| end \| center \| stretch

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

example 1

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

example 2

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2  /* 跨度为 2 */
}

简写
.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

items 属性	描述
`grid-area:`	看博客第一个例子

example

给一个网格项命名

.item-d {
  grid-area: header
}

作为 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写:

.item-d {
  grid-area: 1 / col4-start / last-line / 6
}

最后用简写来实现 PC 布局

.container {
  height: 100vh;
  background: #ddd;
  display: grid;
  
  grid: 50px auto 50px / 10% auto 10%;  /* 行/列的缩写 */
  
  grid-gap: 10px 10px;  /* 间隙的缩写 */
}

.header {
  background: lightblue;
  grid-column: 1 / 4;  /* 定位的另一种写法 */
  grid-row: 1 / 2;
}

.main {
  background: lightpink;
  grid-column: 2;
  grid-row: 2;
}

.aside {
  background: lightgreen;
  grid-column: 3;
  grid-row: 2;
}

.footer {
  background: lightblue;
  grid-column: 1 / span 3;
  grid-row: 3;
}

http://js.jirengu.com/zenul/4/edit?css,output

前面可以忘记了，记住最后一种写法！！！

grid 兼容 | grid 中文文档

layout (grid)

前面可以忘记了，记住最后一种写法 ！！！

推荐阅读更多精彩内容

前面可以忘记了，记住最后一种写法！！！