CSS网格布局

CSS 网格是一个较新的标准，用于构建复杂的响应布局。它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置。
和flex布局类似,需要设置display值

display:grid;

grid布局的几个属性

• grid-template-columns 添加多列
• grid-template-rows 添加多行
• grid-column-gap 列间距 gap(间距)

grid-template-columns

网格容器设置三个列，每列宽度均为 100px。
(这里给出整个样式,下面的不全部给出了,可以直接添加后面的属性实验,看一下效果)

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}

  .container {
    font-size: 40px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 100px 100px 100px;
    /*
    下面是重复,方便操作很多列  100列 每列50px
     grid-template-columns: repeat(100, 50px);
    
     grid-template-columns: repeat(2, 1fr 50px) 20px;
     效果相当于
     grid-template-columns: 1fr 50px 1fr 50px 20px;
		
	minmax函数
 	 第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。
     grid-template-columns: 100px minmax(50px, 200px);

     */
  }
</style>

<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

grid-template-rows

网格容器设置两行，每列宽度均为 50px。

    grid-template-rows:50px 50px;
    /*下面是重复,方便操作很多行  100行 每行50px*/
    grid-template-rows: repeat(100, 50px);

特别的单位

fr：设置列或行占剩余空间的比例
这句grid-template-columns: 1fr 100px 2fr;
就是分成三列,中间占100px,剩下的部分分为三份,第一列占一份,第三列占两份.

    grid-template-columns: 1fr 100px 2fr;

grid-column-gap和gird-row-gap

列间距

	grid-column-gap:20px;

行间距

	grid-row-gap:5px;

还可以简写

	grid-gap:5px 20px
	/*先是行间距 后是列间距*/

grid-column 和grad-row

grid-column:是 grid-column-start (en-US) 和 grid-column-end (en-US) 的简写属性，用于指定网格项目的大小和位置.

grid-row:是 grid-row-start (en-US) 和 grid-row-end (en-US) 的简写属性，用于指定网格项目的大小和位置.

	/*内容范围*/
	/*列 第2条线 到 第4条线*/
	grid-column: 2 / 4;
	/*行 第2条线 到 第4条线*/
    grid-row: 2 / 4;

justify-self和align-self

和flex布局类似,grid布局也有位置调整.
每个网格项的内容分别位于被称为单元格（cell）的框内。 你可以使用网格项的 justify-self 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 stretch.

justify-self:stretch;
/*
stretch:使内容在单元格内拉伸,占满整个单元格,
start:	使内容在单元格左侧对齐，
center：使内容在单元格居中对齐，
end：	使内容在单元格右侧对齐.
*/

align-self和flex布局的属性类似,这里不再赘述,可以去flex布局看看.

justify-items和align-items

justify-items和align-items是设置所有的网格,属性值和上面的两个一样.

grid-area

grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";

这样可以用名称设置单元格的布局
d5就占据了名为footer的所有位置

.d5 {
    background: PaleGreen;
    grid-area:footer;
  }

还有种用法,举例:网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。
简单来说就是行起点/列起点/行终点/列终点.

.d5{ grid-area: 1/1/2/4; }

repeat函数中的两个参数

auto-fit 效果几乎和 auto-fill 一样。 不同点仅在于，当容器的大小大于各网格项之和时，auto-fill 会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而 auto-fit 则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。

 grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
 grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));

谢谢观看

💖