<!DOCTYPE html><html> <head> <style> * { margin: 0; padding: 0; } .grid { /* 网格布局 */ display: grid; /* 每列每行之间的间距 */ gap: 20px; /* 网格布局列散布,repeat相当于for循环 */ /* grid-template-columns: 1fr 1fr 1fr 1fr; */ grid-template-columns: repeat(4, 1fr); } .grid-item { position: relative; } .grid-item::before { content: ' '; /* 设为块元素，宽度撑满 */ display: block; background-color: blue; /* padding-bottom和padding-top百分比是取的父元素的宽度 */ padding-bottom: 100%; /* 宽度是父元素的宽度，高度是父元素的宽度，而后grid-item被撑成了一个正方形 */ } /* 这中央应用相对定位脱离文档流，left:0,right:0,top:0;bottom:0，浏览器主动计算宽高，撑满整个父元素 ，不应用相对定位，他就排在before前面了*/ .con { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } </style> </head> <body> <div class="grid"> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> <div class="grid-item"> <div class="con"></div> </div> </div> </body></html>