CSS3最强布局-Grid布局 点击关注公众号，“技术干货”及时达！grid的布局的使用0.flex布局痛点当我使用到flex的 属性:justify-content属性中 space-between; space-around space-evenly属性值来处理空白区域的分布，最后一行可能会出现间隔过大的情况 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style .box{ margin:50pxauto; display:flex; flex-wrap:wrap; width:600px; height:300px; border:5pxsolid#3333; justify-content:space-evenly; } .boxdiv{ width:100px; height:100px; background-color:#f509f1; border:1pxsolid#d2d0d0; } /style /head body divclass="box" div1/div div2/div div3/div div4/div div5/div div6/div div7/div /div /body /html 1.gird是什么？CSS 网格布局(Grid Layout) 是 CSS 中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行。 gird(网格) 布局与 Flex 弹性布局有相似之处理，都是由父容器包含多个项目元素的使用。 2.兼容性下面是网格系统兼容性数据，你也可以在 https://caniuse.com/ 网站查看，所以在根据项目使用的场景决定是否使用网格布局。 在2024的今天现在浏览器版本基本都是100以上 ，大可放心去使用 但是如果你的客户还在使用用IE就尝试其他布局方式吧， 虽然IE已经没了，不排除其他用户还在使用3.声明容器 1.块级容器display: grid;!DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style .box{ width:100px; height:100px; background-color: margin:10px; display:grid; box-sizing:border-box; padding:10px; border:1pxsolid#d2d0d0; } /style /head body spanxxxxxx/span spanclass="box"/div /body /html 2.行级容器display: inline-grid;!DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style body{ margin:50px; } .box{ width:100px; height:100px; background-color: margin:10px; display:inline-grid; box-sizing:border-box; padding:10px; border:1pxsolid#d2d0d0; } /style /head body spanxxxxxx/span spanclass="box"/div /body /html 4.划分行列网格有点类似表格，也 行 和 列。使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数。1.固定宽度我们划分了3列 3行 元素style .box{ margin:50pxauto; display:grid; grid-template-columns:100px100px100px;//3列 grid-template-rows:50px50px50px;//3行 width:300px; height:300px; border:5pxsolid#3333; } .boxdiv{ padding:20px; background-clip:content-box; background-color:blueviolet; border:1pxsolid#d2d0d0; } /style /head body divclass="box" div1/div div2/div div3/div div4/div div5/div div6/div /div /body 2.百分比可以使用使用百分比自动适就容器。 display:grid; grid-template-columns:33.33%33.33%33.33%;//三列 grid-template-rows:50%//两行 3.重复设置使用 repeat 统一设置值，第一个参数为重复数量，第二个参数是重复值 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style .box{ margin:50pxauto; display:grid; grid-template-rows:repeat(2,50%); grid-template-columns:repeat(2,50%); width:300px; height:200px; border:5pxsolid#3333; } .boxdiv{ padding:20px; background-clip:content-box; background-color:#f509f1; border:1pxsolid#d2d0d0; } /style /head body divclass="box" div1/div div2/div div3/div div4/div /div /body /html 可以设置多个值来定义重复，下面定义四列100px 50px重复排列。display:grid; grid-template-rows:repeat(2,50%); grid-template-columns:repeat(2,100px50px); 注意：repeat 函数第一个参数是重复几次 后面的值**个数 **是他循环重复次数，如上面 grid-template-columns: repeat(2, 100px 50px); 就展示了4列 公式：重复次数 * 参数的个数=2*2 =4 4.自动填充自动填充是根据容器尺寸，自动设置元素尺寸。!DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style .box{ margin:50pxauto; display:grid; grid-template-columns:repeat(auto-fit,100px); grid-template-rows:repeat(auto-fit,100px); width:300px; height:200px; border:5pxsolid#3333; } .boxdiv{ padding:20px; background-clip:content-box; background-color:blueviolet; border:1pxsolid#d2d0d0; } /style /head body divclass="box" div1/div div2/div div3/div div4/div div5/div div6/div /div /body /html 5.比例划分1. 单位组合使用 fr 单位设置元素在空间中所占的比例，下面按1份-2份 分成两组共四列。 width:300px; height:200px; display:grid; grid-template-rows:1fr2fr; grid-template-columns:100px1fr2fr; 2.重复定义width:300px; height:200px; display:grid; grid-template-rows:repeat(2,1fr); grid-template-columns:repeat(2,1fr,2fr); 6.自动空间下面为第二个网格列使用auto来让其获取所有剩余空间 style .box{ margin:50pxauto; /*width:300px;*/ height:200px; display:grid; grid-template-columns:10vwauto20vw; /*grid-template-columns:10vw1fr20vw;*/1fr其实也是一样的 border:5pxsolid#3333; } .boxdiv{ padding:20px; background-clip:content-box; background-color:blueviolet; color:#fff; border:1pxsolid#d2d0d0; } /style body divclass="box" div1/div divauto/div div3/div /div /body 7.组合定义grid-tempalte 是 grid-template-rows、grid-template-columns、grid-template-areas 的三个属性的简写。 下面使用grid-template实现二行三列的布局 style .box{ margin:50pxauto; width:300px; height:200px; display:grid; grid-template:repeat(2,1fr)/repeat(3,1fr); border:1pxsolid } .boxdiv{ padding:20px; background-clip:content-box; color:#fff; border:1pxsolid } /style body divclass="box" div1/div div2/div div3/div div4/div div5/div div6/div /div /body 下面是使用 grid-template 同时声明 grid-template-rows、grid-template-columns。 style .box{ margin:50pxauto; width:300px; height:200px; display:grid; grid-template:50px100px50px/150px150px; border:5pxsolid#d0d0d0; } .boxdiv{ background-clip:content-box; background-color:blueviolet; color:#fff; font-size:20px; border:1pxsolid#d0d0d0; } /style body divclass="box" div1/div div2/div div3/div div4/div div5/div div6/div /div /body 下面是使用grid-template 定义 grid-template-areas ，有关grid-template-areas的使用方法会在下面介绍。 style .box{ margin:50pxauto; width:300px; display:grid; /*点代表占位符一个甚至多个*/ grid-template: 'headerheader.'100px '.mainmain'200px 'footer..'300px; border:5pxsolid#d0d0d0; } .boxdiv{ background-clip:content-box; background-color:blueviolet; color:#fff; font-size:20px; border:1pxsolid#d0d0d0; } div:nth-child(1){ grid-area:header; } div:nth-child(2){ grid-area:main; } div:nth-child(3){ grid-area:footer; } /style body divclass="box" div1/div div2/div div3/div /div /body 8.最大最小值使用 minmax 方法可以设置取值范围，下列在行高在 最小50px ~ 最大1fr 间取值。 style .box{ margin:50pxauto; min-width:150px; height:200px; display:grid; grid-template-columns:repeat(3,minmax(50px,1fr)); grid-template-rows:repeat(2,minmax(100px,1fr)); border:5pxsolid#d0d0d0; } .boxdiv{ background-clip:content-box; background-color:blueviolet; color:#fff; font-size:20px; border:1pxsolid#d0d0d0; } /style body divclass="box" div1/div div2/div div3/div div4/div /div /body 5.间距定义1.行间距使用 row-gap 设置行间距。 width:300px; height:200px; display:grid; grid-template-rows:repeat(2,1fr); grid-template-columns:repeat(3,1fr); row-gap:30px; 2.列间距使用 column-gap 设置行间距。 3.组合定义使用 gap 规则可以一次定义行、列间距，如果间距一样可以只设置一个值。 设置行列间距为 20px 与 10pxwidth:300px; height:200px; display:grid; grid-template-rows:repeat(2,1fr); grid-template-columns:repeat(3,1fr); gap:20px10px; 统一设置行列间距为 20px gap:20px; 6.元素定位1.元素定位属性样式属性说明grid-row-start行开始网格线grid-row-end行结束网格线grid-column-start列开始网格线grid-column-end列结束网格线上面几个样式属性可以使用以下值 属性值说明Line网格络span 数值网格包含的网格数量span 区域名称网格包含到指定的区域名称auto自动设置，默认为一个网格宽度和高度2.根据网格线通过设置具体的第几条网格线来设置区域位置，设置的数值可以是正数和负数 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style *{ margin: padding: } .header{ margin:50px; display:grid; width:300px; height:300px; grid-template-columns:repeat(3,100px); grid-template-rows:repeat(3,100px); border:5pxsolid#cfcfce; } .header.div1{ background-color:blueviolet; grid-column-start://相当于图上所画的cloumn2 grid-column-end://相当于图上所画的cloumn3 grid-row-start://相当于图上所画的row2 grid-row-end://相当于图上所画的row3 color:white; } /style /head body divclass="header" divclass="div1"1/div /div /body /html 3.根据偏移量使用 span 可以设置包含网格的数量或包含到的区域名称。 示例说明grid-row-end:2向下包含 2 行grid-row-start:2向上包含 2 行grid-column-end:2向右包含 2 行grid-column-start:2向左包含 2 行最终占满4个格子!DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style *{ margin:0; padding:0; } .header{ margin:50px; display:grid; width:300px; height:300px; grid-template-columns:repeat(3,100px); grid-template-rows:repeat(3,100px); border:5pxsolid#cfcfce; } .header.div1{ background-color:blueviolet; grid-column-start:1; grid-column-end:span 2; grid-row-start:1; grid-row-end:span 2; color:white; } /style /head body divclass="header" divclass="div1"1/div /div /body /html 4.根据网格命名在第7小节 网格命名中独立命名查看 5.根据自动命名在第7小节 网格命名中自动命名查看 6.简写模式可以使用 grid-row 设置行开始网格线，使用 grid-column 设置结束网格线。 上例中的垂直水平居中对齐元素，可以使用以下简写的方式声明（推荐）。 grid-column: grid-row: 7.更加简写的模式grid-area更加简洁是同时对 grid-row 与 grid-column 属性的组合声明。 语法结构如下： grid-area:grid-row-start/grid-column-start/grid-row-end/grid-column-end。 上例中的垂直水平居中对齐元素，可以使用以下简写的方式声明 grid-area:2/2/3/3 8.实现类似于bootstrap的布局下面是 bootstrap 网格系统的开发，根据指定的样式自动设置网格大小。我把一列画成12列 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style *{ margin:0; padding:0; } .col-1{ grid-column:span 1; } .col-2{ grid-column:span 2; } .col-3{ grid-column:span 3; } .col-4{ grid-column:span 4; } .col-5{ grid-column:span 5; } .col-6{ grid-column:span 6; } .col-7{ grid-column:span 7; } .col-8{ grid-column:span 8; } .col-9{ grid-column:span 9; } .col-10{ grid-column:span 10; } .col-11{ grid-column:span 11; } .col-12{ grid-column:span 12; } .container{ width:1200px; margin:0auto; } .main{ display:grid; grid-template-columns:repeat(12,1fr); } [class^='col-']{ background-color:#d123f0; border:1pxsolid#e8e8e8; padding:10px; box-sizing:border-box; background-clip:content-box; } /style /head body divclass="containermain" divclass="col-2"1/div divclass="col-1"2/div divclass="col-8"3/div /div /body /html 7.网格命名网格线可以使用命名与编号找到，方便控制指定网格，或将内容添加到指定网格中。 1.独立命名 可以为每个网格独立命名来进行调用。我们让元素跑到中间去我创建一个3行3列的网格 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style *{ margin:0; padding:0; } .header{ margin:50px; display:grid; width:300px; height:300px; grid-template-columns:[c1-start]100px[c1-endc2-start]100px[c2-endc3-start]100px[c3-end]; grid-template-rows:[r1-start]100px[r1-endr2-start]100px[r2-endr3-start]100px[r3-end]; border:5pxsolid#cfcfce; } .header.div1{ background-color:blueviolet; grid-row-start:r2-start; grid-column-start:c1-end; grid-row-end:r2-end; grid-column-end:c3-start; color:white; } /style /head body divclass="header" divclass="div1"1/div /div /body /html 2.自动命名上面那种方式过于麻烦了，创建一个列或者行就要给名字，我们用重复函数repeat来实现 style *{ margin:0; padding:0; } .header{ margin:50px; display:grid; width:300px; height:300px; /*grid-template-columns:[c1-start]100px[c1-endc2-start]100px[c2-endc3-start]100px[c3-end]; grid-template-rows:[r1-start]100px[r1-endr2-start]100px[r2-endr3-start]100px[r3-end];*/ grid-template-columns:repeat(3,[c-start]100px[c-end]); grid-template-rows:repeat(3,[r-start]100px[r-end]); border:5pxsolid#cfcfce; } .header.div1{ background-color:blueviolet; grid-row-start:r-start2; grid-column-start:c-start2; grid-row-end:r-start2; grid-column-end:c-end2; color:white; } /style body divclass="header" divclass="div1"1/div /div /body 8.区域定位其实在第6小节的元素定位提到过，在这里我们在这里详细在讲讲，通过 grid-area 属性可以将元素放在指定区域中。grid-area由grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写模式。 1.编号定位下例中将元素放在容器的中心位置中的网格中 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style *{ margin:0; padding:0; } .header{ margin:50px; display:grid; width:300px; height:300px; grid-template-columns:repeat(3,100px); grid-template-rows:repeat(3,100px); border:5pxsolid#cfcfce; } .header.div1{ background-color:blueviolet; grid-area:2/2/3/3 color:white; } /style /head body divclass="header" divclass="div1"1/div /div /body /html 2.命名定位同样是上面的例子可以使用网格线命名来附加元素。 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style *{ margin:0; padding:0; } .header{ margin:50px; display:grid; width:300px; height:300px; grid-template-columns:repeat(auto-fill,[c]100px); grid-template-rows:repeat(auto-fill,[r]100px); border:5pxsolid#cfcfce; } .header.div1{ background-color:blueviolet; grid-area:r2/c2/r3/c3; color:white; } /style /head body divclass="header" divclass="div1"1/div /div /body /html 9.区域声明区域是由多个单元格构成，使用 grid-template-areas可以定义网格区域，并且网格区域必须是矩形的。 1.区域布局下面是使用栅格区域布局移动端页面结构 style body{ width:100vw; height:100vh; display:grid; grid-template-rows:80px1fr50px; grid-template-columns:100px1fr50px60px; grid-template-areas:"headerheaderheaderheader" "navmainmainaside" "footerfooterfooterfooter"; } main{ /*完整的写法，推荐使用下面的简写方式*/ /*grid-area:main-start/main-start/main-end/main-end;*/ /*推荐使用下面的简写方式*/ grid-area:main; background:#E9EEEF; } header{ background:#2EC56C; grid-area:header; } nav{ background:#E1732C; grid-area: } aside{ grid-area:aside; background:#EEBC31; } footer{ grid-area:footer; background:#904FA9; } /style body header/header nav/nav main/main aside/aside footer/footer /body 2.简写形式使用 grid-template 进行栅格划分会更简洁。 语法格式为： grid-template: '栅格名称 栅格名称 栅格名称 栅格名称' 行高 '栅格名称 栅格名称 栅格名称 栅格名称' 行高 '栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽; 下面是使用 grid-template 进行简写的示例style body{ width:100vw; height:100vh; display:grid; grid-template: 'headerheaderheaderheader'80px 'navmainmainaside'auto 'footerfooterfooterfooter'80px/100pxauto60px40px; } main{ /*完整的写法，推荐使用下面的简写方式*/ /*grid-area:main-start/main-start/main-end/main-end;*/ /*推荐使用下面的简写方式*/ grid-area:main; background:#5c59f7; } header{ background:#2ec56c; grid-area:header; } nav{ background:#e1732c; grid-area: } aside{ grid-area:aside; background:#eebc31; } footer{ grid-area:footer; background:#904fa9; } /style body header/header nav/nav main/main aside/aside footer/footer /body 3.区域命名(系统自动命名)系统会为区域自动命名，上例中的会产生 header-start 水平与垂直同名的起始区域与 header-end水平与垂直同名的区域终止。 style body{ width:100vw; height:100vh; display:grid; grid-template: 'header1header1' 'navmain'auto 'footerfooter'60px/100px1fr; } header{ background:#2ec56c; grid-area:header1-start/header1-start/main-end/main-end; } aside{ grid-area:aside; background:#eebc31; } footer{ grid-area:footer; background:#904fa9; } /style body header/header footer/footer /body 4.区域占位使用一个或多个 连续的. 定义区域占位。 style body{ width:100vw; height:100vh; display:grid; grid-template: '..header' '..main' 'footerfooter'60px/100px1fr; } header{ background:#2ec56c; grid-area:header-start/header-start/main-end/main-end; } aside{ grid-area:aside; background:#eebc31; } footer{ grid-area:footer; background:#904fa9; } /style body header/header footer/footer /body 10.网格流动在容器中设置grid-auto-flow 属性可以改变单元格排列方式。 选项说明column按列排序row按行排列dense元素使用前面空余栅格（下面有示例说明）1.基本使用下例将单元按列排序流动 style article{ width:400px; height:400px; display:grid; grid-template-rows:repeat(2,1fr); grid-template-columns:repeat(2,1fr); border:solid5pxsilver; grid-auto-flow:column; } div{ background:blueviolet; background-clip:content-box; padding:10px; font-size:35px; color:white; } /style article div1/div div2/div div3/div div4/div /article 2.强制填充当我们布局的时候有些空隙这个时候 style article{ width:400px; height:400px; display:grid; grid-template-rows:repeat(2,100px); grid-template-columns:repeat(2,100px); border:solid5pxsilver; } div{ background:blueviolet; background-clip:content-box; padding:10px; font-size:35px; color:white; } div:first-child{ grid-column:2/4; } div:nth-child(2){ grid-column:1/3; } /style ... article div1/div div2/div div3/div div4/div /article 当元素在栅格中放不下时，将会发生换行产生留白，使用grid-auto-flow: row dense; 可以执行填充空白区域操作。 我们可以使用 **grid-auto-flow: row dense; ** article{ width:400px; height:400px; display:grid; grid-template-rows:repeat(2,100px); grid-template-columns:repeat(2,100px); border:solid5pxsilver; grid-auto-flow:rowdense; } 11.对齐管理可以通过属性方便的定义栅格或元素的对齐方式 选项说明对象justify-content所有栅格在容器中的水平对齐方式，容器有额外空间时栅格容器align-content所有栅格在容器中的垂直对齐方式，容器有额外空间时栅格容器align-items栅格内所有元素的垂直排列方式栅格容器justify-items栅格内所有元素的横向排列方式栅格内所有元素的横向排列方式栅格容器栅格容器align-self元素在栅格中垂直对齐方式栅格元素justify-self元素在栅格中水平对齐方式栅格元素1.网格对齐justify-content 与 align-content 用于控制栅格的对齐方式，比如在栅格的尺寸小于容器的里面时，控制栅格的布局方式。 justify-content 属性的值如下 值说明start容器左边end容器右边center容器中间stretch撑满容器space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍space-evenly栅格间距离完全平均分配align-content 属性的值如下 border:solid5pxsilver; width:600px; height:600px; display:grid; grid-template-columns:200px200px; grid-template-rows:200px200px; justify-content:space-between; align-content:space-evenly; 值说明start容器顶边end容器底边center容器垂直中间stretch撑满容器space-between第一个栅格靠左边，最后一个栅格靠右边，余下元素平均分配空间space-around每个元素两侧的间隔相等。所以，栅格之间的间隔比栅格与容器边距的间隔大一倍space-evenly栅格间距离完全平均分配下面是栅格水平与垂直居中对齐的示例 !DOCTYPE html html lang="en" head meta charset="UTF-8" / meta name="viewport" content="width=device-width, initial-scale=1.0" / titleDocument/title style article { display: grid; border: 5px solid #d2d0d0; height: 400px; width: 400px; grid-template-columns: repeat(4, 60px); justify-content: center; align-content: center; } article div { border: 1px solid #d2d0d0; padding: 10px; background-color: blueviolet; box-sizing: border-box; height: 50px; } /style /head body article div/div div/div div/div div/div /article /body /html 2.元素对齐justify-items 与 align-items 用于控制所有栅格内元素的对齐方式 justify-items 用于控制元素的水平对齐方式，可用的属性值如下值说明start元素对齐栅格的左边end元素对齐栅格的右边center元素对齐栅格的中间stretch水平撑满栅格align-items 用于控制元素的垂直对齐方式，可用的属性值如下值说明start元素对齐栅格的顶边end元素对齐栅格的底边center元素对齐栅格的垂直中间stretch垂直撑满栅格下面是将元素在所在栅格中水平、垂直居中的示例 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style article{ display:grid; border:5pxsolid#d2d0d0; height:100px; width:400px; grid-template-columns:repeat(4,100px); grid-template-rows:100px; justify-items:flex-start; align-items:center; } articlediv{ border:1pxsolid#d2d0d0; padding:10px; background-color:blueviolet; box-sizing:border-box; width:50px; height:50px; } /style /head body article div1/div div2/div div3/div div4/div /article /body /html 3.元素独立控制justify-self 与 align-self 控制单个栅格内元素的对齐方式，属性值与 justify-items 和 align-items 是一致的。 div:first-child{ justify-self: align-self:center; } div:nth-child(4){ justify-self:start; align-self:center; } 4.组合简写1.place-content用于控制栅格的对齐方式，语法如下： place-content:align-contentjustify-content 2.place-items控制所有元素的对齐方式，语法结构如下： place-items:align-itemsjustify-items 3.place-self控制单个元素的对齐方式 place-self:align-selfjustify-self 12.自动排列当栅格无法放置内容时，系统会自动添加栅格用于放置溢出的元素，我们需要使用以下属性控制自动添加栅格的尺寸。 1.属性说明选项说明对象grid-auto-rows控制自动增加的栅格行的尺寸，grid-auto-flow:row; 为默认容器grid-auto-columns控制自动增加的栅格列的尺寸，grid-auto-flow: column;容器2.自动栅格行下面定义了 2X2 的栅格，但有多个元素，系统将自动创建栅格用于放置额外元素。我们使用 grid-auto-rows 来控制增加栅格的行高。 如果没有定义溢出的高度或宽度，盒子宽/高根据 自身内容而来未设置溢出高度或宽度设置溢出高度!DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style main{ display:grid; grid-template-rows:repeat(2,50px); grid-template-columns:repeat(2,1fr); grid-auto-rows:100px;//溢出的高度就是100px grid-auto-columns:200px; } div{ background:blueviolet; background-clip:content-box; border:solid1px#ddd; color:white; } /style /head body main div1/div div2/div div3/div div4/div div5/div div6/div /main /body /html 我们将改变单元格排列方式。 grid-auto-flow: column; !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style main{ display:grid; grid-template-rows:repeat(2,50px); grid-template-columns:repeat(2,1fr); grid-auto-rows:100px; grid-auto-columns:200px; grid-auto-flow:column; } div{ background:blueviolet; background-clip:content-box; border:solid1px#ddd; color:white; } /style /head body main div1/div div2/div div3/div div4/div div5/div div6/div /main /body /html 3.自动行列下面创建了 2X2 栅格，我们将第 2 个 DIV 设置的格栅已经超过了2行2列，所以系统会自动创建栅格。 第2个DIV已经是200x200了 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8"/ metaname="viewport"content="width=device-width,initial-scale=1.0"/ titleDocument/title style main{ display:grid; grid-template-rows:repeat(2,50px); grid-template-columns:repeat(2,1fr); grid-auto-columns:200px; grid-auto-rows:200px; } div{ background:blueviolet; background-clip:content-box; border:solid1px#ddd; color:white; } div:nth-child(2){ grid-area:3/3/4/3; } /style /head body main div1/div div2/div /main /body /html 点击关注公众号，“技术干货”及时达！ 阅读原文