17day-网格grid

网格布局 grid

他将网页划分成一个个网格，可以任意组合成不同的网格，做出各种各样的布局。
grif布局与flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是也存在较大区别

• flex布局：是一种轴线布局，只能指定元素针对轴线的位置，可以看作一维布局。
• grid布局：将同期分为行和列，产生单元格，然后指定元素所在的单元格，可以看作是二维布局。

基本概念

容器与项目

通过display属性定义网格布局区域的元素称为容器。容器内部采用网格定位的子代元素被称为项目。

  <div class="box">
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
  </div>

注意：项目只能是日改的顶层子元素，不包含项目的子元素，即不包含后代元素（与flex中一样）

行与列

容器中水平区域被称为行（row），垂直区域被称为列（column）

单元格

行和列的交叉区域，称为单元格（cell）
正常情况下，n行和m列会产生n * m个单元格。

网格线

划分网格的线，称为网格线。水平网格线划分出行，垂直的网格线划分出列。
正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线。

容器属性

grid布局的属性分为两类，一类定义在容器上，称为容器属性，另一类定义在项目上，称为项目属性。

display属性

用于定义哥容器采用网格布局

{
  display:grid;
}

默认情况下，容器为块级元素，也可以设为行内块元素

{
  display:inline-grid;
}

注意：设为网格布局以后，容器子元素的浮动、display：inline-block、display：table-cell、vertical-align等设置都会失效。

grid-template-columns、grid-template-rows 设置网格列的宽度和行的高度。

    .box{
      width: 500px;
      height: 500px;
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      grid-template-rows: 33.33% 33.33% 33.33%;
    }

上面代码表示，定义一个三列三行的网格，列宽与行高都为33.33%。
%：根据自身宽高，进行计算。

repeat()

当网格很多时，写重复的值太麻烦了，可以使用repeat函数，简化。

{
  grid-template-rows: repeat(number,value);
}

{
  grid-template-rows: repeat(3,100px);
}

第二个值为多个值

{
  /* 等价于 定义了四列，第一列与第三列宽度为100px，第二列与第四列宽度为50px */
  grid-template-columns: repeat(2,100px 50px);
}

auto-fill关键字

当单元格大小是固定的，但容器大小不确定，如果希望每一行，容纳尽可能多的单元格，可以使用auto-fill关键字进行填充

    .box{
      /* width: 500px; */
      /* height: 500px; */
      display: grid;
      grid-template-columns: repeat(auto-fill,100px);
      grid-template-rows: repeat(3,100px);
    }

fr关键字

是一个比例单位，与flex中的增加因子类似，用于表示网格列宽或行高之间的值的比例关系

    .box{
      width: 600px;
      height: 500px;
      display: grid;
      grid-template-columns: 150px 2fr 3fr;
      grid-template-rows: repeat(3,1fr);
    }

上例表示，第一列固定150px，第二三列按照比例划分剩余空间。

minmax函数

minmax函数会产生一个数值范围，表示属性的取值在这个范围中，他接受两个参数，第一个参数为最小值，第二个参数为最大值。

    .box{
      width: 600px;
      height: 500px;
      display: grid;
      grid-template-columns: 150px 410px minmax(50px,200px);
      grid-template-rows: repeat(3,1fr);
    }

上例代码表示，网格第三列的宽度最小不会低于50px，最大不会超过200px。
注意：当最小值大于最大值，最大值则直接失效。

auto关键字

可以用于让浏览器来定义网格的列宽或行高

    .box{
      width: 600px;
      height: 500px;
      display: grid;
      grid-template-columns: repeat(3,auto);
      grid-template-rows: repeat(3,1fr);
    }

上述代码表示，网格的列宽由浏览器来分配（通常都是平分，或等于该列单元格最大的宽度，除非单元格内容设置了min-width，且这个值大于最大宽度）。
列的尺寸取决于容器的大小以及列中项目内容的大小。

为网格线定义名称

在grid-template-columns/rows中，还可以使用方括号，指定每一根网格线的名称，方便后面的引用

    .box{
      width: 600px;
      height: 500px;
      display: grid;
      grid-template-columns: [c1 first-line] 100px [c2] 200px [c3] 300px [c4];
      /* justify-content: space-between; */
      grid-template-rows: [r1] 100px [r2] 200px [r3] 300px [r4];
    }

注意：网格布局中同一个根线允许存在多个名字。

网格的行间距与列间距 grid-row-gap、grid-column-gap、grid-gap

grid-column-gap 调整网格的列间距

{
  grid-column-gap:10px
}

grid-row-gap 调整网格的行间距

{
  grid-row-gap:10px;
}

grid-gap前两个属性的复合语法

{
    grid-gap:<grid-row-gap> <grid-column-gap>;
    grid-gap:10px 10px;
    等价于
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}

如果书写一个值，那么第二个值等于第一个值。

• 根据现在最新的标准，上面三个属性的属性名琴啊追已经被删除了，grid-row-gap现在写成row-gap，grid-gap写成gap。

定义网格的区域 grid-template-areas

网格布局与许指定区域，一个区域由单个或多个单元格组成。

{
        grid-template-areas: "a b c" "d e f" "h i g";
}

上述代码表示划分出九个单元格，然后将命名为a到i的九个区域，分别对应九个单元格。
在之后可以通过grid-area属性在网格项目上单独设置每个元素在哪个区域显示，也可以将多个单元格合并成一个区域。

{
        grid-template-areas: "header header header" "main main main" "foot foot foot";
}

注意：区域的命名会影响到网格线，每个区域的起始网格线，会自动名门为区域名-start，终止网格线自动命名为 区域名-end。

定义单元格排列顺序 grid-auto-flow

划分网格以后，容器的项目会按照顺序，自动放置在每一个单元格内，默认的放置顺序是“先行后列”，即先填满第一行，在开始放入第二行

{
  grid-auto-flow:row | column | row dense | column dense
}

• row：默认值，先行后列，即先填满第一行，在开始放入第二行
• column：先列后行，优先列填满，在开始放第二列
• row dense：子元素会有线填满行，不会因为子元素所在位置改变而产生间隙
• column dense：子元素会优先填满列，不会因为子元素所在位置改变而产生间隙

注意：如果一个项目改变位置时，（所占列和行的位置都设置时），即使grid-auto-flow设置的值为row或column，元素之间都不会产生间隙，效果与设置row dense和column dense类似。

定义项目在容器单元格内的位置 justify-items、align-items、place-items

justify-items 设置单元格内项目的水平位置（左中右）

{
  justify-items:start | end | center | stretch
}

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内居中
• stretch：拉伸，将项目占满整个单元格（默认值）

align-items 设置单元格内项目的垂直位置（上中下）

{
  align-items:start | end | center | stretch
}

• 取值与justify-items相同

place-items 上两个属性的复合语法

{
  place-items:<align-items> <justify-items>
}

注意：取值就是前两个属性的取值，且只写一个值时，第二个值浏览器会默认与第一个值相等。

定义容器内单元格的位置 justify-content、align-content、place-content

justify-content 定义容器内单元格的水平位置

{
  justify-content:space-around | space-evenly | space-between | start | end | center | stretch;
}

• start:默认值，单元格对齐容器的起始边框，一次排列
• end：单元格对齐容器的结束边框，依次排列
• center：将所有单元格看作一个整体，在容器中居中
• stretch：拉伸，单元格咩有指定大小时，自动拉伸至占满整个容器
• space-around：每个单元格两则的间隔相等，所以，单元格之间比单元格与容器边框间距大一倍。
• space-between：单元格之间间隔相等，首尾的单元格与容器边框之间没有间隔
• space-evenly：单元格与单元格的间隔相等，首尾的单元格与容器边框之间的间隔也相等。

align-content 定义容器内单元格的垂直排列方式

{
  align-content:space-around | space-evenly | space-between | start | end | center | stretch;
}

• 取值与justify-content一致

place-content 上两个属性的复合语法

{
  place-content:<align-content> <justify-content>;
}

注意：取值就是前两个属性的取值，且只写一个值时，第二个值浏览器会默认与第一个值相等。

定义容器内超出单元格的列宽和行高 grid-auto-columns、grid-auto-rows

在某些情况下，一些单元格的位置在现有网格的外部。例如定义一个3行3列的一个网格但我的某个子元素占据了两个单元格的位置，这时网格会自动创建行或列来放置剩余的一个子元素（会创建行还是列，与容器的grid-auto-flow属性有关）。如果不进行设置浏览器会根据单元格的设置以及内容大小，来决定新增单元格的列宽和行高（超出的列会将容器剩余的宽度平均分配到超出的每一列中，高度与容器设置的行高一致。超出的行通常行高为当前单元格内元素的高度，列宽与容器设置的列宽一致。）

grid-auto-columns 定义超出的列的列宽

{
  grid-auto-columns:50px;
}

注意：可以设置多个值，每个值按顺序依次设置超出列的宽度，在实际开发中一半用作为列设置一个默认列宽，只设一个值。

grid-auto-rows 定义超出行的行高

{
  grid-auto-rows:50px;
}

注意：可以设置多个值，每个值按顺序依次设置超出行的高度，在实际开发中一半用作为行设置一个默认行高，只设一个值。

项目属性

定义项目的位置 grid-column-start、grid-column-end、grid-row-start、grid-row-end

项目的位置可以通过指定项目的四个边框，分别定位在哪根网格线。

• grid-column-start：指定项目的左边框所在的垂直网格线
• grid-column-end：指定项目的右边框所在的垂直网格线
• grid-row-start：指定项目上边框所在的水平网格线
• grid-row-end：指定项目下边框所在的水平网格线
• 取值：
  • 网格线的顺序序号，按照从左往右从上往下的顺序
  • 直接按网格线设置的名称进行设置
  • 如果容器的网格划分了区域，还可以以当前区域的网格线名称作为取值
• 如果设置的值超过现有设置的网格的网格线，则浏览器会自动创建对应个数的单元格
• 没有设置指定位置的项目，则由浏览器自动布局，这时他们的位置由容器的grid-auto-flow属性决定。

span关键字

用于设置项目所在位置，表示“跨越”，即左右边框（上下边框）之间跨越了多少个网格

{
  grid-column-start: span 2;
}

表示的意思是，元素的结束边位于我当前元素的开始边跨越两个单元格后的那一条边。

{
  grid-column-end: span 2;
}

效果与上面一致，表示元素的开始边距离我结束边往左跨越两个单元格的那一条边。
注意：使用以上属性调整位置时，如果产生了项目的重叠，可以使用z-index属性指定项目的重叠顺序。

grid-column、grid-row复合语法

grid-column属性是grid-column-start/end的合并简写形式，grid-row属性是grid-row-start/end的合并简写形式。

{
  grid-column:<start-line> / <end-line>;
  grid-row:<start-line> / <end-line>;
}

如果只取一个值表示的意思为元素的起始边。

grid-area 定义项目放在哪一个区域

{
  grid-area:b;
}

还可以作为grid-row-start、grid-row-end、grid-column-start、grid-column-end的合并简写形式，直接指定项目的位置。

{
  grid-area:<row-start> / <column-start> / <row-end> / <column-end>;

  grid-area: 2 / 1 / 4 / 3;
  /* 等价于 */
  grid-column-start:1;
  grid-column-end:3;
  grid-row-start:2;
  grid-row-end:4;
}

指定元素在单元格内的位置 justify-self、align-self、place-self

justify-self 定义元素在单元格内的水平位置

{
  justify-self: start | end | center | stretch;
}

• start：对齐单元格的起始边缘
• end：对齐单元格的结束边缘
• center：单元格内居中
• stretch：拉伸，将项目占满整个单元格（默认值）

align-self 定义元素在单元格内的垂直位置

{
  align-self: start | end | center | stretch;
}

• 取值与justify-self一致。

place-self 上两个属性的简写

{
  place-self:<align-self> <justify-self>;
}

注意：如果省略第二个值，第二值会与第一个值相等。