[TOC] # 纯grid > 第一个为对比图 div结构2层, 其他7个结构 div 三层  ## 页面布局 (此结构需三层div) > 第一个为对比图,与其他7个结构不一样 ``` <div class="container"> <div class="line"> <img src="images/1.png" /> <p>nihao小姐姐</p> </div> //div布局还需复制六个 <div class="line"> <div> <img src="images/1.png" /> <p>nihao小姐姐</p> </div> </div> ~~ ....X6 <div class="line"> ~~ </div> ``` ## css样式 ### 第一种 ``` <style> img { width: 80px; height: 80px; } .container { margin: 100px; display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: 200px 200px; grid-gap: 1px; } .container .line { // width,height 清除网格线重叠 width: 200px; height: 200px; border: 1px solid #999; display: grid; } .line div { text-align: center; background:red; justify-self: center; align-self: center; } </style> ``` ### 第二种 ``` <style> img { width: 80px; height: 80px; } .container { margin: 100px; display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: 200px 200px; } .container .line { border: 1px solid #999; display: grid; //清除网格线重叠 margin-left: -1px; margin-top: -1px; } .line div { text-align: center; background:red; justify-self: center; align-self: center; } </style> ``` # div加flex布局 只需俩层div  ## 页面布局同上 ## css样式 ``` <style> img { width: 80px; height: 80px; } .container { margin: 100px; display: grid; grid-template-columns: repeat(4, 200px); grid-template-rows: 200px 200px; } .container .line { border: 1px solid #999; display: grid; display: flex; justify-content: center; align-items: center; flex-direction: column; margin-left: -1px; margin-top: -1px; } .line div { text-align: center; background:red; justify-self: center; align-self: center; } </style> ```