[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> ```