网格布局是一种由一系列水平和垂直线组成的布局模式。使用网格，我们可以排列设计元素，帮助我们设计一系列固定的位置和宽度。元素页面让我们的网站页面更加统一。一个网格通常有很多“列和行”以及行和列之间的空隙，通常称为“间距”。1.定义一个网格我们可以通过设置display属性为grid来定义一个网格。与flexbox一样，将父容器更改为网格布局会使其??直接子容器成为网格项。.container{display:grid;}1.1设置列（column）和行（row）grid-template-columns用于设置column，grid-template-rows用于设置row。.container{display:grid;grid-template-columns:100px200px;}这里我们创建两个列，宽度分别为100px和200px。当然，这里可以使用任何长度单位和百分比。grid-template是grid-template-rows和grid-template-columns的简写，例如：grid-template:50px50px/100px;将创建两个50px高的行和一个100px宽的列。1.1.1使用fr单位除了长度和百分比，我们还可以使用fr单位来灵活定义网格的行列大小。这个单位代表可用空间的比例，类似于flex布局中的flex-grow/flex-shrink。.container{display:grid;grid-template-columns:1fr1fr;}上面我们创建了两个等分的列。如果希望两列的比例为1:2，可以这样设置：.container{display:grid;grid-template-columns:1fr2fr;}另外，fr可以和一般的长度单位混用，比如asgrid-template-columns:100px1fr2fr结果是第一列的宽度为100px，剩下的两列会根据去掉100px后的可用空间按照1:2的比例分配。1.1.2重复设置列/行我们可以使用repeat函数来重复创建具有一定宽度配置的列。如果要创建多个等宽列，可以这样写：.container{display:grid;grid-template-columns:repeat(3,1fr);}传递给repeat函数的第一个参数表示后面的列宽configuration重复多少次，第二个参数表示需要重复的配置。此配置也可以有多个长度设置。例如：repeat(2,100px200px)会得到这样的效果：1.1.3自动填充某一个在某些情况下，我们需要为网格创建很多列来填充整个容器，而容器的宽度是可变的，所以没有办法确定重复的次数。这时候我们可以在重复功能中使用关键词自动填充来达到这个效果。.container{display:grid;grid-template-columns:repeat(auto-fill,150px);}可以看到在500px宽度的容器上创建了三个150px的列，剩下的50px不够再创建一个列，所以第四个元素放在第二行。1.1.4minmax()函数我们可以使用minmax函数来设置一个范围。.container{display:grid;grid-template-columns:100pxminmax(100px,300px)100px;}1.2gridgap使用column-gap属性定义列间距；使用row-gap来定义行间距；使用gap同时设置两者。.container{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:10px20px;}*gap属性曾经有一个grid-前缀，但后来的标准被修改以允许它们在不同的工作布局方法。虽然现在这个前缀不影响语义，但是为了代码的健壮性，两个属性都可以写。另外，虽然gap属性在grid布局中的兼容性很好，但是在flex布局中的兼容性目前好像不太好：2.放置元素2.1基于行放置元素。我们的网格中有许多分隔线。我们可以根据这些分界线来放置元素：我们也可以使用grid-column和grid-row同时指定起始行和结束行。需要注意的是，起止行的序号要用/隔开。.container{display:grid;grid-template-columns:100px400px;grid-template-rows:50px150px50px;gap:10px}.header{grid-column:1/3;}.sidebar{grid-column:1/2;}.content{grid-column:2/3;}.footer{grid-column:1/3;}我们也可以用负数来指定分界线，-n代表最后第n条网格线。有时很难确定列数，但又想定位到最后一列，那么可以考虑使用负网格线。比如上面的header可以这样写：.header{grid-column:1/-1;}2.1.1使用span除了使用开始和结束分隔符来指定位置之外，我们还可以使用span来指定元素占用的列数/行数：.header{grid-column:1/span2;}//这样写也可以.header{grid-column:span2/-1;}效果一样上图。2.1.2使用grid-area我们也可以使用grid-area一次性指定所有的行/列号：///，即先指定起始坐标的行/列号，再指定行/结束坐标的列号。.header{grid-area:1/1/2/3;}2.2使用grid-tempate-areas放置元素另一种放置元素的方法是使用grid-template-areas属性，并命名一些元素并在attribute使用这些名称作为区域。grid-template-areas属性的使用规则如下：grid中需要填充的每个grid对于跨越多个grid的元素，重复该元素的grid-area属性定义的区域名称Allnamescanonlyappearin一个连续的区域不能出现在不同的位置。连续区域必须是矩形。使用。将网格留空的符号。container{display:grid;grid-template-columns:100px400px;grid-template-rows:50px150px50px;grid-template-areas:"headerheader""sidebarcontent""footerfooter";gap:10px}.header{grid-area:header;}.sidebar{grid-area:sidebar;}.content{grid-area:content;}.footer{grid-area:footer;}如果你想将侧边栏扩展到底部，只需将grid-template-areas更改为：.container{//...grid-template-areas:"headerheader""sidebarcontent""sidebarfooter";}效果如下：是一种非常直观的通过命名来放置元素的方式，你在CSS中看到的就是实际会出现的布局效果。3.显式网格和隐式网格显式网格是使用grid-template-columns或grid-template-rows属性创建的，而隐式网格是当“griditem放在定义的”时才会自动生成“在grid之外”或者说“griditem的个数多于grid的个数”。假设现在我们定义一个1行x2列，宽高为100px的grid容器，放置两个griditema和b其中：如果我们把griditema和b放在定义的grid上如果在grid外：.a{grid-column:3;}.b{grid-row:2;}可以看到grid多了比以前定义的网格，这些额外的网格是隐式网格。此外，不仅网格更多，网格线也更多。列网格线4和行网格线3是自动生成的隐式网格线。3.1设置隐式网格的大小上图中a和b的区别在于网格a的宽度自动填充容器，而网格b的高度为内容的高度，这是默认行为.我们可以将grid-auto-rows和grid-auto-columns属性设置为网格容器以指定隐式网格的大小：.container{grid-auto-rows:100px;grid-auto-columns:100px;}现在隐式样式网格的大小也是100px*100px。3.2自动放置上面提到，当网格项的数量多于网格的数量时，会自动生成一个隐式网格。默认情况下，元素将逐行放置，如果空间不足，则会生成新行。我们可以使用grid-auto-flow属性修改此行为。比如现在有一个3x3的网格容器，a和b都占据两列。默认情况下，因为b在第一行没有足够的空间，所以最终会放在第二行，然后c在b的后面。如果修改为grid-auto-flow:column，元素会逐列放置，c会放在第三行：如果修改为grid-auto-flow:dense，会填充之前的格子在row的基础上留下的空白：还有columndense等值。详细请参考MDN:grid-auto-flow4.调整对齐下面的例子都是基于这个网格容器：.container{display:grid;grid-template-columns:repeat(2,100px);grid-template-rows:repeat(2,50px);gap:10px}4.1justify-items沿行轴对齐网格项目。startendcenter4.2align-items沿列轴对齐网格项目。startendcenter4.3justify-content如果网格容器的大小大于整个网格内容，那么可以使用justify-content或者align-content来调整网格内容的对齐方式。有关详细信息，请参阅弹性布局。startendcenterspace-betweenspace-aroundspace-evenly4.4align-content参考上面5。最近别人在实现两列布局的时候使用了网格布局，但是效果看起来有点bug，这里简单分享一下。首先假设html和css是这样的：123456789
