网格布局网格生成网格布局定义行和列改变排列方向单元格之间的间隙单元格内部的对齐网格项目定位第一个练习第二题【手写试一试】第三题【手写】网格MDN详细文档阮一峰网格布局教程网格布局小游戏网格布局是多行多列布局的终极解决方案咱们来听网格的讲解，好，咱们谈下一个话题网格。网格就是网格，它不是表格啊，别用表格布局啊，多年前表格布局就被抛弃掉了，你看看浮动那么差的布局都可以替代表格，不要用表格布局啊。现在最高级的多行多列布局方式叫网格，官方的说法呢，就是网格是多行多列布局方式的终极解决方案。没有比它更好的了啊，咱们来看一下这个网格。嗯，网格里边呢，有给给大家提供了这么几个文档，一个是MDN的详细文档，还有一个是阮易峰的网格布局啊，应该是目前所有博客里边讲的最好的网格布局，它讲的非常详细啊。因为它详细的所以它东西多，你们记不住啊，所以说我们这里呢，还是给大家写了一个比较简约的，这么一个网格布局，平时开发中绝大部分网格布局就已经完全够用了。啊，如果说你不够用的话，你可以没事儿的时候可以看一下这个 阮易峰的网格布局教程啊，然后这里一个网格布局小游戏，好像是一个拔萝卜还是什么样子，呃，你可以下来，有时间可以去玩一玩啊，但是先把作业完成。生成网格布局容器生成网格布局后，其所有子元素为网格项目好，网格布局，咱们来看一下啊，网格布局呢，就是生成一个多行多列的格子，我们这些子元素就往格子里边放，它自动往里边放，就这么简单。那么，怎么来生成网格布局呢，先大概看一下网格布局图片，然后我们来做练习。display : grid，grid就是网格的意思啊，那么父元素去设置这个东西display : grid，它就生成了一个网格布局了，就表表示它是一个grid 网格容器，它里边的子元素呢，就变变成了网格项目。啊，跟那个弹性核的本那个说法是一样的。但网格布局呢，你要去设置它的列，不然呢它只有一列啊，你看一下我们来写个小例子好，你看这个容器，我们现在还没有变成网格啊，现在要把contaier，把它变成网格display ：grid。它就变成网格了，好像没有什么变化，对不对，你看一下，指着它，它变成一个grid点一下。啊，你会看到有些数字，这个数字不用管啊，你看它是不是有一个大格子，它现在只有一列。是不是只有一列，默认情况下，那么这些子元素就往这个大格子里边排，第一行第一列排一个，第二行第一列排一个，第三，第四，第五，依次排。对吧啊，默认情况下就是这样子，但是我们可以去设置啊，它有的它的列数以及每列这样的宽度，比方说我们这样子设置啊，grid-template-columns ：50px 50px 50px这里的50px，50px，50px有啥意思，就表示这个网格呢，生成三列，每列宽度为50px，好，咱们来试一下。我们现在去设置一下这个网格，你看你看现在这个网格，你看现在格子是不是这样的格子，对吧，三列，然后呢，三列里边呢，依次排列。那格式在里边，从左到右，从上到下，依次排列好的，我们比方说在这里item呢，给它生成一个数字嘛，你看就这样排列的，就这么简单，啊，你不用去设置行，行的话它不够它会自动增加，啊，这就是网格，当然你可以设置行，比方说我现在不设置列了，我设置行。可不可以呢也可以。算了，我列也设置，行也设置吧，比方说我这里再设置一个grid-template-rose啊，比方说我行的话，我多设置一点啊，一二三四五六七设置个八行。grid-template-rose：100px 100px 100px 100px 100px 100px 100px 100px是不八行，现在我们再来看。列宽50px，行高80px，对吧，然后这个时候呢，其实你可以里边的项目呢，里边的元素【网格项目】你可以不不用设置宽高，没有设置宽高的话，。它会自动撑满格格子，撑满单元格。看到没，它会自自动撑满。好，这就是那么这就是目前的情况，那单元格中间为什么有空隙啊，那不是空隙啊，是你单元格设置的border。看到没啊，这就是这么一个情况好，那有同学说那如果说这个行不够怎么办呢你看下面这种情况，你只设置了2行，行高80px行不够的话，它会自动增加，不它增加你设置好的行，它新增的行啊它的高度，它就是自动高度，自动给你新增加的行不是你要自己设置的高度，是它自动给你配置的高度。好，这就是这么一个情况，生成网格布局啊，基本的情况就这么一个情况，然后概念的话就是外面的父元素叫做网格容器，里边的子元素叫做网格项目，好，那么接下来就是你这些呃文档了，我们来看快速的浏览一下定义行和列啊，定义行和列grid-template-rows：定义行grid-template-columns：定义列它们的语法是相同的下面拿定义列来举例子说明该语法，那么这个语法呢对行也是同样适用的`通过这个玩意儿【grid-template-rows】，就刚才我们写的定义行，通过它来定义列【grid-template-columns】。对吧，你看语法是一样的，写法都完全一样的，下面我就用定义列的方式来举例子，50，100，150就表示有三列，第一列50，第二列100，第三列150。好，这里呢，还有一种特殊写法，叫repeat，repeat这是个函数啊叫重复，有的时候一个个写的话列很多，一个个写很麻烦，那么就是grid-template-rows repeat(3,100px）啥意思，一共有三列。统一为列，宽为100 px，这一看就看明白了，对吧,好，我们这里写一下吧，我们这里呢，使用这个列的话，行注释掉啊，列的话，我们就用repeat。有五列，每列呢50个宽度。那就五列的。就这么简单好，然后继续看啊，还可以这样子写啊grid-template-rows : 50px 1fr 1fr这啥意思呢，还是吃剩余空间。grid-template-rows : 50px 1fr 1fr，好第一列占50个像素，那么后边是有剩余空间，对吧，第一列占占了50px，那么后边的剩余空间是不是这一部分这一部分呢？1fr ,1fr 就是这两列吃掉剩余空间一比一的比例去吃，fr叫fragments就是片段啊，你理解成比例就完事了，一比一的比例去吃这个剩余空间，所以说这第二列和第三列，这一列它们是等宽的。啊，就这么简单好，再看这后边grid-template-rows : repeat(3,1fr)那么就是没有固定的列宽，网格盒子整个都是剩余空间，整个都是剩余空间的话分成三列，每列吃比例都是1fr 啊，那么就是平均分成三份。啊，就这么简单。啊，那么这个语法呢对行也是同样适用的。改变排列方向使用属性grid-auto-flow: column，可使子元素按列排放好，然后改变排列的方向，就叫做grid-auto-flow: column呃呃，就排列方向啊，不是改变列的方向，改变排列方向啊，默认情况下呢是这样排列的从左到右依次排列，一二三四五六七对吧，是这样排列的，那么你可以改变它排列方向，通过这个grid-auto-flow: column啊，不用管它的单词，无所谓。你把改成column。那就可以按列来排放，啥意思啊？比方说这里有个例子，有三行啊，三行，每一行占一个比例，把剩余的空间，把这个容器吃满啊，如果如果说容器有高度的话，把这个容器的高度。啊，就是全部吃掉一比一的比例，吃掉分成三行然后呢grid-auto-flow: column，把它变成column的方式呢，它就不再按行来按按那个行来排列了由原先的按行排列，现在变成了按列排列按行排列按列排列，按列来排列，他这样排列的对吧，如果说你要做这样的效果的话，就可以用这种方式grid-auto-flow: column啊改变网格项目的排列方向，单元格之间的间隙row-gap:10px;/* 行间隙为10px */column-gap:20px;/* 列间隙为20px */gap:10px 20px;/* 行间隙为10px，列间隙为20px */下面单元格之间的间隙，你看目前那个单元格之间啊，是没有间隙的，你是可以设置间隙的，怎么设置呢？非常简单，设置gap:10px 20px第一个表示行的间隙，第二个表示列的间隙好， 咱们来试一下啊。呃，这里呢就是gap ，行的间隙，比方10px，列的间隙，20个像素。不就完了吗，行，十个像素的间隙，列二十个像素的间隙，那么gap:10px 20px这个其实是一个速写属性啊，你只要知道这个gap可以设置间隙就完事了，忘了就去查。单元格内部的对齐默认情况下，网格项目在单元格内部水平和垂直拉伸，以撑满单元格可以使用属性justify-items设置水平方向的排列方式可以使用属性align-items设置垂直方向的排列方式它们的可取值是相同的：justify-items:start 左 | end 右 | center 中 | stretch 拉伸;align-items:start 上 | end 下 | center 中 | stretch 拉伸;可以使用速写属性place-items: 垂直对齐方式 水平对齐方式同时设置这两个值place-items:start center;/* 垂直靠上，水平居中 */单元格内部的对齐，默认情况下，单元格内的元素啊，在单元格里边是撑满的，撑满单元格的，所以你没有设置网格项目的宽，高，它就会自动撑满的每一个网格。啊，咱们来看一下吧，默认情况下是不是每一个格子啊，你看这个这是这个网格，你看看网格。网格里边是不是里边的元素把格子撑满的，对不对啊。然后现在我们可以去设置在每一个单元格里边的元素啊，在单元格里边的排列方式就这么个意思。就是每个单元格内部的对齐，那么它有哪些对齐呢，呃。它可以这样子写justify-items设置的是水平方向的排列方式，align-items是设置的是垂直方向的排列方式，就这个意思。啊，比方说我们这里去设置justify-items : center align-items : start啥意思呢，就表示水平上center什么意思居中。然后呢垂直方向上start在最开始。那我们来设置一下啊，比方说我们这里呢去设置。它们justify-items：center，你看水平方水平方向，它就不再撑满了是居中的，然后呢，就是align-items：center所以全部居中，元素在