CSS Grid 网格布局

原创 CSS pengchen    2017, August 14     阅读:

CSS Grid是一个强大的 web 二维布局工具，能够以行和列来进行布局；

1. 网格容器

通过设置display的属性为grid或inline-grid来创建网格容器；

display: grid
默认行排列，宽度为容器的宽度；

.container{
    display: grid;
    border: 1px dashed gray;
}

display: inline-grid

.container{
    display: inline-grid;
    border: 1px dashed gray;
}

2.显式网格

grid-template-rows：none | <track-list> | <auto-track-list>

grid-template-columns：none | <track-list> | <auto-track-list>

这两个属性差不多的，一个是行一个是列，我下面就以grid-template-columns来举例子；

where <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

where <auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

grid-template-columns: <track-list> → <track-size>

where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

2.1 示例：（<track-breadth>）

where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<flex>：css数据类型，表示网格容器内的灵活长度（如1fr,1.5fr）;

.container{
  display: grid;
  border: 1px dashed gray;
  grid-template-columns: 200px 1fr 1fr;
  //将容器分成3列，一列宽度为200px，然后将容器剩下的部分成2个部分,第二列和第三列各占1个部分
}

2.2 示例：（minmax( <inflexible-breadth> , <track-breadth> )）

设置最小和最大的列宽度

where <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

.container{
  display: grid;
  border: 1px dashed gray;
  grid-template-columns: minmax(200px,1fr) 1fr;
  //将容器分成2列，第一列设置宽度最小为200px,最大为1fr
}

2.3 示例：（fit-content( [ <length> | <percentage> ] )）

<style type="text/css">
	.container {
	  display: grid;
	  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
	  grid-gap: 5px;
	  width: 100%;
	  background-color: #eee;
	  padding: 10px;
	}
	.container > div {
	  background-color: #ffc727;
	  padding: 5px;
	}
</style>
<div class="container">
  <div>内容不足300px,适应内容的宽度</div>
  <div>
    我这里内容比较多,超过300px了，但是我不能比设置的最大宽度300px更宽了。
  </div>
  <div>我就要剩下的了</div>
</div>

grid-template-columns: <track-list> → <track-repeat>

where <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

2.4 示例：(repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ))

第一个参数：规定应重复的数量，也就是分成几列； 第二个参数：规定分成的列的宽度；

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: repeat(3,1fr);
}

grid-template-columns: <auto-track-list>

where <auto-track-list>= <fixed-list> <auto-repeat> <fixed-list>

where <fixed-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

where <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

2.5 示例：（grid-template-columns: <auto-track-list>）

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: 1fr repeat(1, 100px) 2fr;
}

3.网格间隙

grid-gap:<'grid-row-gap'> <'grid-column-gap'>?

第一个参数：行的间隙 第二个参数：列的间隙 3.1 示例：

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px 20px;
}

4.通过网格线号定位

网格线本质上是表示列和行轨迹的开始，结束或之间的行。 从轨道开始和网格方向开始的每一行从1开始递增编号。

如图4-1.png，这个3x2网格可以生成4x3的网格线，里面的1,2,3,4,5,6块就根据这些网格线来进行定位；

grid-row：<grid-line> [ / <grid-line> ]?

where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

grid-column：<grid-line> [ / <grid-line> ]?

where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

4.1 示例：

.item {  
    grid-row:2 / 3; 
    //将元素放在行的第2条和第3条网格线之间
    //列也是差不多的
}

还可以实现跨行或列

.item{
    grid-column: 1 / 3;
}

还可以使用span来实现跨行或列

.container{
    display: grid;
    border: 1px dashed gray;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 20px;
    //asd
}
.item1{
    grid-column: 1/span 3;
    //列的第1条网格线开始，跨3列
}
.item2{
  grid-row: 2/span 3;
  grid-column: 2/span 2;
  //等价于 grid-area: 2/ 2 / span 3 / span 2
}

<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

5.隐式网格

使用grid-auto-rows, grid-auto-columns, grid-auto-flow 来设置隐式网格；

• grid-auto-rows：<track-size>+ 设置隐含创建的网格行的大小
• grid-auto-columns：<track-size>+ 设置隐含创建的网格列的大小轨道
• grid-auto-flow：<track-size>+ 设置隐含创建的网格的默认流方向

.container {
  display: grid;
  grid-gap:5px;
  grid-template-rows: 70px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
  grid-auto-flow: row;
}

CSS Grid
MDN

感谢您的阅读