CSS Grid 网格布局

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

1. 网格容器

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

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

.container{
    display: grid;
    border: 1px dashed gray;
}复制代码

图1-1.png

display: inline-grid

.container{
    display: inline-grid;
    border: 1px dashed gray;
}复制代码

图1-2.png

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.1.png

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-2(1).png (宽度最大1fr时)

图2-2(2).png (宽度最小200px时)

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>复制代码

图2-3.png

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);
}复制代码

图2-4.png

---

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;
}复制代码

图2-5.png

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;
}复制代码

图3-1.png

4.经过网格线号定位

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

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

图4-1.png

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条网格线之间
    //列也是差很少的
}复制代码

图4-1.png

还能够实现跨行或列

.item{
    grid-column: 1 / 3;
}复制代码

图4-2.png

还能够使用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>复制代码

图4-3.png

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;
}复制代码

图5-1.png

---

CSS Grid
MDN感谢您的阅读