（css篇）1.grid布局PS：整理自阮一峰 CSS Grid 网格布局教程后续会加上自己练习内容。 5.grid

一、容器属性

1.display: grid;&display: inline-grid; 指定一个容器采用网格布局 PS：默认容器元素都是块级元素
备注a 网格布局，float、display:inline-block、display:table-cell、vertical-align和column-*等设置都将失效
2.grid-template-columns&grid-template-rows 属性定义每一列的列宽&属性定义每一行的行高
备注b 单位可以使用绝对单位百分比
repeat() 1).简化重复的值例：grid-template-rows: repeat(3, 33.33%)
PS：接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值
2).重复某种模式例：grid-template-columns: repeat(2, 100px 20px 80px)
auto-fill 关键字表示自动填充例：grid-template-columns: repeat(auto-fill, 100px)
fr 关键字表示比例关系，如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
例：grid-template-columns: 1fr 1fr
PS： fr可以与绝对长度的单位结合使用，非常方便 grid-template-columns: 150px 1fr 2fr
minmax() 表示长度就在这个范围之中。例：grid-template-columns: 1fr 1fr minmax(100px, 1fr)
auto 关键字表示浏览器自己决定长度。例：grid-template-columns: 100px auto 100px
网格线的名称 PS：grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字
例：grid-template-columns:[c1] 100px [c2] 100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]
布局实例
两列布局 display: grid; grid-template-columns: 70% 30%;
十二网格布局grid-template-columns: repeat(12, 1fr)
3.row-gap 行间距 column-gap 列间距例：row-gap: 20px;column-gap: 20px; gap是row-gap和column-gap合并简写形式 gap: <row-gap> <column-gap>
4.grid-template-areas 定义区域 display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;grid-template-areas: 'a a a' 'b b b' 'c c c';
某些区域不需要利用，使用"点".表示
5.grid-auto-flow 划分网格后，容器子元素排列顺序。PS：默认会先行后列
grid-auto-flow: row 先行后列 grid-auto-flow: column 先列后行
PS:设置成grid-auto-flow: row dense;或grid-auto-flow: column dense 当布局按照原先情景时会遇到空格，添加dense之后，会尽可能紧密填满，不出现空格。
6.justify-items 设置单元格内容的水平位置排列(左中右) & align-items 设置单元格内容的垂直位置(上中下)
例:justify-items: start | center | end | stretch; align-items: start | center | end | stretch;
place-items属性是align-items属性和justify-items属性的合并简写形式
place-items: <align-items> <justify-items>
7.justify-content 整个内容区域在容器里面的水平位置(左中右) & align-content 整个内容区域的垂直位置(上中下)
例:justify-content: start | center | end | stretch | space-around | space-between | space-evenly
align-content: start | center | end | stretch | space-around | space-between | space-evenly
start 对齐容器的起始边框
end 对齐容器的结束边框
center 容器内部居中
stretch 项目大小没有指定时，拉伸占据整个网格容器
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
place-content属性是align-content属性和justify-content属性的合并简写形式
place-content: <align-content> <justify-content> PS: 如果省略第二个值，浏览器就会假定第二个值等于第一个值
8.grid-auto-columns和grid-auto-rows用来设置，浏览器自动创建的多余网格的列宽和行高。
PS: 如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高
例：display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px;grid-auto-rows: 50px;
9.grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid属性是grid-template-rows 、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。PS: 不推荐使用简写

二、项目属性

1.grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线
例：.item-1 {grid-column-start: 2;grid-column-end: 4;}
例：设置了dense
.item-1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 2; grid-row-end: 4;}
指定网格线名字设置：.item-1 {grid-column-start: header-start;grid-column-end: header-end;}
span关键字表示"跨越"，即左右边框(上下边框)之间跨越多少个网格
.item-1 {grid-column-start: span 2;}
.item-1 {grid-column-end: span 2;}这个效果和上面一样的
2.grid-column&grid-row分别是grid-column-start和grid-column-end&grid-row-start和grid-row-end的合并简写形式
语法：.item {grid-column: <start-line> / <end-line>; grid-row: <start-line> / <end-line>}
例：.item-1 {grid-column: 1 / 3; grid-row: 1 / 2;}
等同于：.item-1 {grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;}
例2：.item-1 {background: #b03532; grid-column: 1 / 3; grid-row: 1 / 3;}
等同于：.item-1 {background: #b03532; grid-column: 1 / span 2; grid-row: 1}
注：斜杠以及后面的部分可以省略，默认跨越一个网络
3.grid-area指定项目放在哪一个区域 .item-1 { grid-area: e; } PS: item-1位于名字是e区域
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
.item {grid-area: <row-start> / <column-start> / <row-end> / <column-end>;}
4.justify-self属性设置单元格内容的水平位置(左中右) & align-self属性设置单元格内容的垂直位置(上中下)
start: 对齐单元格的起始边缘
end：对齐单元格的结束边缘
center：单元格内部居中
stretch：拉伸，占满单元格的整个宽度（默认值）
place-self属性是align-self属性和justify-self属性的合并简写形式
如果省略第二个值，place-self属性会认为这两个值相等
place-self: <align-self> <justify-self>
例：.item-1 {justify-self: start;}
place-self: center center;

三、圣杯&双飞翼布局(grid)

说明：圣杯布局&双飞翼布局都是实现一个两侧宽度固定，中间宽度自适应的三栏布局。

html

  <section className="main">
    <div className="left">left</div>
    <div className="center">111</div>
    <div className="right">right</div>
  </section>

css

  .main {
      display: grid;
      grid-template-rows: 300px;
      grid-template-columns: 100px auto 100px;
      grid-template-areas: 'a b c';

  }
  .main .left {
      background: #00f;
  }
  .main .center {
      background: #f00;
      grid-area: b;
  }
  .main .right {
      background: #00f;
  }

效果图

四、九宫格布局

html

  <section className="main">
    <div className="child">1</div>
    <div className="child">2</div>
    <div className="child">3</div>
    <div className="child">4</div>
    <div className="child">5</div>
    <div className="child">6</div>
    <div className="child">7</div>
    <div className="child">8</div>
    <div className="child">9</div>
  </section>

css

  .main {
      display: grid;
      grid-template-rows: 120px 120px 120px;
      grid-template-columns: 120px 120px 120px;
      row-gap: 20px; /* 行间距 */ 
      column-gap: 20px; /* 列间距 */
      grid-auto-flow: column;  /* 先列后行 */
  }
  .child {
      background: #f00;
      color: #fff;
  }

效果图

五、grid-column-start 等属性练习

说明：包含grid-template-* gap grid-auto-flow place-content ....等

html

  <section className="main">
    <div className="child">1</div>
    <div className="child">2</div>
    <div className="child">3</div>
    <div className="child">4</div>
    <div className="child">5</div>
    <div className="child">6</div>
    <div className="child">7</div>
    <div className="child">8</div>
    <div className="child">9</div>
  </section>

css

  .main {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    gap: 10px 10px;
    grid-auto-flow: row dense;   /* 设置子元素排列顺序  dense 子元素先按照排列 然后空的填满 */
    place-content: start start; /* 设置整个内容区域在容器的位置 */
    grid-auto-rows: 50px;  /* 设置多余网格的行高 */
}
.child {
    background: #f00;
}
.child:first-child {
    grid-column-start: 2; /* 垂直网格线来定义位置使用 */ 
    grid-row-start: 2; /* 水平网格线来定义位置使用 */ 
    grid-column-end: 4;
    grid-row-end: 4;
}

效果图