<!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>